Question

I need a modal pop up for a button using jquery. I have worked with modal popups for an action link, nut I need it to work with a button only.

The jquery that I used for the action link:

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

Is:

$(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);
    });
});

Problem

I need to apply this same behavior for the button.

Answer 1

You could use jQuery UI Dialog. If you made it work with an ActionLink it would be the same with a button. Define a button and a placeholder for the dialog:

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

​

and then subscribe to the click event of the button and show the dialog:

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

and here’s a live demo.

---

Now that you have shown your code here’s how to adapt it to work with a button:

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

and then:

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