与背景迷离的莫代尔窗口

Question

我有以下模型

左边是一个名单和一个箭头列表（目前我在Todd和Patricia上显示过这个，但每个名字都有这个名字）。单击箭头我应该打开一个模态窗口。

目前我点击箭头打开JQueryUI对话框。

是否可以使用模态对话框实现图像中显示的UI？

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

Answer 1

编辑：

要实现您提供的屏幕截图中显示的用户界面，其中所选li位于叠加层顶部（modal）并“连接”到对话框，您必须执行以下操作：

1. 将对话框放在点击的li旁边，然后停用拖动＆amp;大小调整。
2. 为所选li设置样式以进一步延伸（width）并应用position: relative +高z-index，使其位于叠加层顶部。
3. 做一些CSS魔术，所以看起来不错！ ： - ）

我写了一个更新的JSFiddle，以完美展示我上面所描述的内容。我相信你可以从这里继续自己。就个人而言，我认为它看起来整洁，几乎与你的截图相同。

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

---

（原始答案：）

是的，这是可能的。首先，创建一个Dialog对象。然后在名单列表上绑定一个.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/