javascript - 具有不同内容的 JQuery 可重用对话框

标签 javascript jquery user-interface dialog modal-dialog

我是 JQuery 新手,无法创建可重用对话框。这是我的代码

    $(function () {
    $("#baseDialog").dialog({
        autoOpen: false,
        modal: true,
        width: 520,
        show: "blind",
        hide: "explode"
    });
    $("#baseDialogOpener").click(function () {
        $("#baseDialog").dialog("open");
        return false;
    });

我像这样使用这个对话框:

<input id="baseDialogOpener" type="button" value="Update" />
    <div id="baseDialog" title="Test Dialog" class="divClass">
    <!-- here goes some ASP .NET MVC 2 code -->
    </div>

问题是我想在许多页面中多次重用此对话框,但具有不同的 html 内容,但我不知道如何执行此操作,因为我无法使用类属性,因为我也需要使用样式。我无法在同一页面上使用具有相同值的 id 属性。 我没有办法这样使用它吗?也许有除了 id 之外的另一个属性(类是为 css 保留的)?
<input id="baseDialogOpener" type="button" value="Update" /><br/> <div id="baseDialog" title="Test Dialog" class="divClass"><br/> <form>...</form><br/> </div><br/> <input id="baseDialogOpener" type="button" value="Update 2" /><br/> <div id="baseDialog" title="Test Dialog 2" class="divClass"><br/> <form>...</form><br/> </div>
期待您的答复。
更新:我使用类属性执行了上面的代码,但是当我单击按钮时,所有对话框都会立即出现。有办法解决这个问题吗?

最佳答案

该对话框打开时可以从服务器加载 .htm 文件的内容。

你可以使用这样的东西:

$("#baseDialogOpener").click(function () {
    $("#baseDialog").load('content.htm');
    return false;
});

更新:这段代码展示了如何让相同的.click()根据按钮显示不同的内容。

$("dialogButton.").click(function () {
    $("#baseDialog").load($(this).data('content'));
    return false;
});


<input type="button" value="first" id="button1" class="dialogButton" data-content="content1.htm" />
<input type="button" value="second" id="button2" class="dialogButton" data-content="content2.htm" />

关于javascript - 具有不同内容的 JQuery 可重用对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5833864/

相关文章:

java - 如何保证JInternalFrame下的绘画?

javascript - 隐藏的路由器 View 破坏了数据绑定(bind) - Aurelia

javascript - jQuery Tag-It - 使用标签和值对象列表

javascript - 选择 JSON 返回的 html 标记内的 data-id 值

jquery - 如何仅迭代表的顶级 <tr> 标签

android - 是否可以创建没有边框的 Android AlertDialog?

javascript - 如何使用 Jquery typeahead.js 插件从搜索输入中选择多个选项

javascript - 我应该如何延迟ajax请求?

jquery - HTML 日历使用 Jquery 选择日期范围

c# - 多线程 COMObject 和 UI 线程 (C#)