Can anyone show me how to set it to auto center on browser resize? I know there are many answered questions regarding this matter, but I'm a total amateur. I need someone to rewrite the following code for me, please.
Thanks.
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '800',
modal: true,
title: 'Bonus Features'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
}
</script>
I'm not very familiar with jdialog or whatever plugin you're using, however, you can bind onto the window resize event.
$(window).bind('resize.dialog', function(e) {
/* resize dialog */
});
If there's no method to resize the "jdialog" you could just close and reopen the dialog every time, but that seems undesirable.
you can add a window resize event to reset the position to center, center
example: http://jsfiddle.net/pxfunc/byknH/
$(window).resize(function() {
$('.popupDialog').dialog({position: ['center', 'center']});
});
I added this as part of your other question, but here it is again...
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
height: '1012',
modal: true,
position: ['center', 'center'],
title: 'About Ricky',
width: 690
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
}
// This part does the center on browser resize...
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
Related
i have some problem with ie9 and jquery ui but still cant find solution please help me
When i click Detail dialog must be open and it works on ie7,ie8,FF,Chrome but don't in ie9
$(function() {
var popup = $("#popup"),
allFields = $([]).add(popup);
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
function dialogOpen(id) {
$('#dialog-form').dialog('open');
}
<div id="pageopen" onclick="dialogOpen('dialog-form')">
<div id="detail" style="text-decoration:underline;">Detail</div>
</div>
<div id="dialog-form" title="Detail"></div>
Add the following code in document.ready. You trying to open the dialog before it is being created.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
I using jquery ui dialog with dynamic height. When it opens it’s centered, but when it loads the content it’s expanding toward the bottom of the page.
Here is my function:
$(this.document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("dialog-id"))
.dialog({
autoOpen: false,
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: $(this).attr("dialog-width"),
heith: 'auto',
resizable: false,
draggable: false,
show: 'scale',
hide: 'puff',
position: ['center', 'middle']
})
.load(this.href).dialog("open");
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
I was able to fix this by setting autoOpen:false and creating the dialog content with my ajax call in the create method. Once that returned, and the content created, I called open on the dialog. Works great!
Above ans not work for me.
$(document).live("ajaxStop", function (e) {
$("#myDiagDiv").dialog("option", "position", "center");
});
When I click on the link 'alert' then the message will only popup once, which is correct. Strangely if I click on the link 'dialog' and then on the link 'alert' then the message is popping up twice consecutively, which is incorrect.
How can I fix this so that the message will only be displayed once?
HTML
<p id="test">alert</p>
dialog
jQuery
$(function() {
$("p#test a").click(function() {
alert('alert');
});
}
function showDialog(){
$("<div class='popupDialog'>Loading...</div>").dialog({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}
You can try this script.
<script type="text/javascript">
$(document).ready(function () {
$("p#test a").click(function () {
alert('alert');
});
});
function showDialog1() {
$("<div class='popupDialog'>Loading...</div>").dialog()({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function () {
$(this).dialog('destroy');
});
}
<script>
Right now, I have a website that someone made for me, and unfortunately, I'm stuck. I understand a little, but remain to be a total novice. I have pictures I want for the pop-up, but whenever I set the height and width to 'auto', the box locates to the bottom of the page?
I need it to auto center on resize as well if possible.
Please help me recreate my code, anyone? Thanks.
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'></div>").load(url)
.dialog({
autoOpen: true,
closeOnEscape: true,
height: '1012',
modal: true,
position: ['center', 'center'],
title: 'About Ricky',
width: 690
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
});
}
</script>
The problem you are having is that when the dialog opens it is empty and the position is calculated. Then you load the content and it does not automatically recalculate the new center position. You need to do this yourself in the onComplete event handler. See below, I have also put in some nice loading text :)
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
height: '1012',
modal: true,
position: ['center', 'center'],
title: 'About Ricky',
width: 690
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
I have this link to close a jquery UI dialog box:
Close this window
And here is the jQuery:
$("#login-link").click(function() {
$("#login-box").dialog({
close: function(ev, ui) {
$(this).hide();
},
draggable: false,
height: 300,
modal: true,
position: ["center","center"],
resizable: false,
width: 1020
});
});
$("#close-login-box").click(function() {
$("#login-box").dialog("close");
});
Why doesn't the dialog box close when I click the link?
You don't need
close: function(ev, ui) {
$(this).hide();
},
Because $('#login-box').dialog('close'); will hide the dialog for you, there's no need to specify it yourself.