Javascript 具有背景模糊的模式窗口

我有下面的模型

左边是姓名列表和箭头（目前我已经在Todd和Patricia上显示了这一点，但每个姓名上都有）。单击箭头，我将打开一个模式窗口

目前，我打开的箭头点击对话框

是否可以使用模式对话框实现如图所示的UI

在不关闭模式对话框的情况下，是否可以单击Hasen、Todd的箭头并用新数据加载模式对话框？

编辑： 要实现您提供的屏幕截图中显示的UI，其中所选的

li

位于覆盖（

modal

）的顶部并“连接”到对话框，您必须执行以下操作：

将对话框放置在单击的

li

旁边，并禁用拖动和调整大小

设置所选

li

的样式以进一步扩展（

宽度

），并应用

位置：相对

+高

z-指数

，使其位于覆盖层的顶部

做一些CSS魔术，这样看起来会很好！：-） 我已经编写了一个更新的JSFIDLE来完美地演示我上面描述的内容。我相信你能从这里独立前进。就我个人而言，我认为它看起来很整洁，几乎和你的截图一样

JSFIDLE演示的结果：

---

（原始答复：）

是的，这是可能的。首先，创建一个

对话框

对象。然后绑定一个

。单击名称列表上的事件处理程序，通过回调打开对话框并设置内容

这是一个exmaple：
[JavaScript]

[HTML]


你好，我的名字是：








您可以使用或或以任何其他方式设置内容

下面是一种快速“定制”jQuery UI主题的方法：

您可以随时使用CSS根据自己的喜好设置
.ui-
类的样式

这里是一个JSFIDLE演示：
我已经编写了代码，我的问题是如何获得UI中的外观。当我设置modal:true时，我不可能抖动背景。当单击箭头时（modal:true），用户界面应抖动除发生单击的名称以外的所有内容（原型中的Patricia未抖动），即使背景中的内容发生抖动，也允许用户单击任何姓名上的箭头来加载此人的数据。我已经编写了代码，我的问题是要获得UI中的外观和感觉。当我设置modal:true时，这是不可能的jsfiddle.net/Dmp94/1我想在单击箭头时抖动背景（modal:true），用户界面应该抖动除发生单击的名称以外的所有内容（原型中的Patricia不会抖动），即使背景中的内容出现抖动，也允许用户单击任何其他姓名（如Todd）上的箭头以加载此人的数据。感谢您的澄清-请查看我的更新答案，它已满足您的所有需要。这可能很愚蠢，我无法将css和jquery切换部分用于以下结构。这没有帮助，请将相关的JavaScript和CSS附加到修改后的JSFIDLE。然而，通过快速查看-您在html中使用的是
表
，如果不进行某种修改，我的代码（依赖于
ul
+
li
）将无法使用。
var myDialog = $("#dialog").dialog({
    autoOpen: false
})

$("ul#names > li").click(function() {
    var myName = $(this).data("name");

    /* Open Dialog */
    if(myDialog.dialog("isOpen") !== true)
        myDialog.dialog("open");

    /* Change dialog title */
    myDialog.dialog("option", "title", myName)

    /* Change dialog contents */
    myDialog.find("span.name").text(myName);
    myDialog.find("div.content").html("Set content here!");
})

<div id="dialog">
    <p>Hello, my name is: <span class="name"></span></p>
    <div class="content">
        <!-- Content goes here -->
    </div>
</div>

<ul id="names">
    <li data-name="Hasen"><a href="#">Hasen</a></li>
    <li data-name="Todd"><a href="#">Todd</a></li>
    <li data-name="Patricia"><a href="#">Patricia</a></li>
</ul>