Question

我需要使用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);
    });
});

问题

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

Answer 1

您可以使用jQuery UI Dialog。如果你使用ActionLink它可以与按钮一样。为对话框定义按钮和占位符：

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

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

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

这是一个live demo。

现在您已经在这里展示了代码，了解如何使用按钮进行调整：

<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'));
    });
});

JQuery Modal弹出一个按钮

1 个答案: