The below code works fine for only the first click event. However for any subsequent click nothing happens. I tested this on firefox, ie7 but still the same. Am I missing something?
<script type="text/javascript">
$(document).ready(function() {
//$('#dialog').dialog();
$('#dialog_link').click(function() {
$('#dialog').dialog();
return false;
});
});
</script>
</head><body>
<div id="dialog" title="Dialog Title" style="display:none"> Some text</div>
<p id="dialog_link">Open Dialog</p>
</body></html>
This question is related to
jquery
modal-dialog
Try adding this line before your dialog line.
$( "#dialog" ).dialog( "open" );
This method worked for me. It seems that the "close" command messes up the dialog opening again with only the .dialog() .
Using your code as an example, it would go in like this (note that you may need to add more to your code for it to make sense):
<script type="text/javascript">
$(document).ready(function() {
//$('#dialog').dialog();
$('#dialog_link').click(function() {
$( "#dialog" ).dialog( "open" );
$('#dialog').dialog();
return false;
});
});
</script>
</head><body>
<div id="dialog" title="Dialog Title" style="display:none"> Some text</div>
<p id="dialog_link">Open Dialog</p>
</body></html>
Try this
$(function() {
$('#clickMe').click(function(event) {
var mytext = $('#myText').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
And in HTML
<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>
$(function() {
$('#clickMe').click(function(event) {
var mytext = $('#myText').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").hide();
}
});
}); //close click
});
Better to use .hide() instead of .remove(). With .remove() it returns undefined if you have pressed the link once, then close the modal and if you press the modal link again, it returns undefined with .remove.
With .hide() it doesnt and it works like a breeze. Ty for the snippet in the first hand!
If you want to put some page in the dialog then you can use these
function Popup()
{
$("#pop").load('login.html').dialog({
height: 625,
width: 600,
modal:true,
close: function(event,ui){
$("pop").dialog('destroy');
}
});
}
HTML:
<Div id="pop" style="display:none;">
</Div>
May be helpful... :)
$(document).ready(function() {
$('#buutonId').on('click', function() {
$('#modalId').modal('open');
});
});
Source: Stackoverflow.com