1

我有以下模型

在此处输入图像描述

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

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

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

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

4

1 回答 1

2

编辑：

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

  1. 将对话框放置在单击的旁边li，并禁用拖动和调整大小。
  2. 将选定的样式设置li为进一步扩展 ( width) 并应用position: relative+ 高z-index，使其位于叠加层的顶部。
  3. 做一些 CSS 魔术，让它看起来不错！:-)

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

JSFiddle Demo 的结果：http: //jsfiddle.net/losnir/Dmp94/3/embedded/result/
（见代码）

（原答案：）

是的，这是可能的。首先，您创建一个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/

于 2013-08-15T17:28:33.383 回答