javascript - 背景模糊的模态窗口

Question

我有以下模型

左边是姓名列表和一个箭头(目前我已经在 Todd 和 Patricia 上展示了这个，但每个名字都可以使用)。单击箭头时，我应该会打开一个模态窗口。

目前我正在打开 JQueryUI单击箭头的对话框。

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

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

Answer 1

编辑:

要实现您提供的屏幕截图中显示的 UI，其中选定的 li 位于叠加层 (modal) 的顶部并“连接”到对话框，您必须执行以下操作:

1. 将对话框放在点击的 li 旁边，并禁用拖动和调整大小。
2. 设置所选 li 的样式以进一步扩展 (width) 并应用 position: relative + 高 z-index 所以它位于叠加层的顶部。
3. 做一些 CSS 魔术，这样看起来会很棒! :-)

我已经编写了一个更新的 JSFiddle 来完美地展示我上面描述的内容。我相信您可以从这里独立进行。就个人而言，我认为它看起来很整洁，并且与您的屏幕截图几乎相同。

JSFiddle 演示的结果:http://jsfiddle.net/losnir/Dmp94/3/embedded/result/
(see code)

---

(原始答案:)

是的，这是可能的。首先，您创建一个 Dialog 对象。然后在您的名称列表上绑定(bind)一个 .click 事件处理程序，并使用一个回调来打开对话框并设置内容。

这是一个例子:

[JavaScript]

---

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!");
})

[HTML]

---

<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>

---

您可以使用 $.get() 设置内容或 $.ajax() ，或您想要的任何其他方式。

这是“自定义”jQuery UI 主题的快速方法:http://jqueryui.com/themeroller/
您始终可以根据自己的喜好使用 CSS 设置 .ui- 类的样式。

这是一个 JSFiddle 演示:http://jsfiddle.net/losnir/Dmp94/