0

我需要一个使用 jquery 的按钮的模式弹出窗口。我曾为动作链接使用模态弹出窗口，但我只需要它与按钮一起使用。

我用于操作链接的 jquery：

    <%: Html.ActionLink("Create", "Create_By_SupAdmin", null, new { @class = "openDialog", 
data_dialog_id = "newPostDialog", data_dialog_title = "Create New Profile" }) %>

是：

$(document).ready(function () {
    $('.openDialog').live('click', function (e) {
        e.preventDefault();
        $('<div></div>')
            .addClass('dialog')
            .attr('id', $(this)
            .attr('data-dialog-id'))
            .appendTo('body')
            .dialog({
                title: $(this).attr('data-dialog-title'),
                close: function () {
                    $(this).remove()
                    window.location.reload()
                    },
                modal: true,
                width: 500
            })
            .load(this.href);
    });
});

问题

我需要对按钮应用相同的行为。

4

1 回答 1

1

您可以使用jQuery UI 对话框。如果你让它与 ActionLink 一起工作，它与按钮相同。为对话框定义一个按钮和一个占位符：

<input type="button" id="btn" value="Show modal" />
<div id="dialog"></div>

​​​

然后订阅按钮的点击事件并显示对话框：

$('#btn').click(function() {
    $('#dialog').dialog().html('some contents');
});​

这是一个现场演示。

现在您已经展示了您的代码，这里是如何调整它以使用按钮：

<input type="button" value="Create" class="openDialog" data-dialog-id = "newPostDialog", data-dialog-title="Create New Profile" data-url="<%= Url.Action("Create_By_SupAdmin") %>" />

接着：

$(document).ready(function () {
    $('.openDialog').live('click', function (e) {
        e.preventDefault();
        $('<div></div>')
            .addClass('dialog')
            .attr('id', $(this).attr('data-dialog-id'))
            .appendTo('body')
            .dialog({
                title: $(this).attr('data-dialog-title'),
                close: function () {
                    $(this).remove();
                    window.location.reload();
                },
                modal: true,
                width: 500
            })
            .load($(this).attr('data-url'));
    });
});
于 2012-09-21T07:06:10.357 回答