JQUERY UI Modal Tutorial
Can anyone provide a clean example of how to use JQUERY's UI Modal dialog. Surprisingly it's not as simple as you would think.
Goal:
clicking an element loads a modal
The modal appears showing "Loading..." And then makes an ajax call to get the contents of the modal
The modal can be closed by clicking a close btn or by pressing escape
The modal can be repopened, and when it's reopened it doesn't show the state of the previous modal interaction.
Thanks!
Here is what I currently am doing, but it works very clumsy and doesn't seem at all like a smart solution. Ideas?
var $dialog = $('<div id="sharerdialog"></div>')
.html('<p>Loading...</p>')
.dialog({
autoOpen: false,
title: 'Share the item',
position: 开发者_如何学JAVA['center',150],
width: 450,
focus:function(event, ui) {
$('#dialogcloser').click(function() {
$dialog.dialog('close');
});
},
open: function(event, ui) {
var title2use = document.title;
title2use = escape(title2use);
$("#sharerdialog").load("/items/ajax/share/index_beta.cfm?itemid=#itemID#&itemtitle=" + title2use);
}
});
// Bind the Share btn to Open the Modal
$('#itemshare').click(function() {
$dialog.dialog('open');
});
The main problem I see with your code, is that you are not adding the dialog to the DOM, therefore, the browser won't display it. My suggestion is that you first try:
var $dialog = $('<div id="sharedialog"></div>')
.html('<p>Loading....</p>')
.appendTo('body')
.dialog({...});
So that you added it to the DOM, and the browser can display it.
Why so complex?
$(function() {
$("#itemshare").click(function() {
$("#sharerdialog").dialog().load("/items/ajax/share/index_beta.cfm");
return false;
});
});
You can chain it uo in jquery. And in the HTML just have a empty div with the id sharerdialog. May style it hidden
style="display: none;"
But thats it
精彩评论