JQuery Modal Pop Up for a button - asp.net-mvc-3

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