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

jQueryUIダイアログを使用できます。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 に答える