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>
Related
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");
});
I have a need to show 2 dialog modals at once. Due to the contents of the first dialog needing to use some absolute positioning and z-indexing, the z-index of the overlay is important to me.
The problem I get is if I show a the first modal at z-index of 300, the overlay gets a z-index of 301. If I then show another modal with a z-index of 500, the new overlay gets a z-index of 501. If I close both of the modals and open the first modal again, instead of getting an overlay with z-index of 301, it is 503.
Here is some sample code.
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modal').hide();
$('#success-message').hide();
$('#show-modal-button').click(function(){
$('#modal').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 400
});
});
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
});
</script>
</head>
<body>
<input type="button" id="show-modal-button" value="show modal"/>
<div id="modal">
<input type="button" id="modal-button" value="push"/>
</div>
<div id="success-message"><p>test</p></div>
</body>
</html>
UPDATE
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
Try setting the "stack" option to false:
'stack: false'
That might work for you
'stack: false' worked for me.
It seems setting it false stops the dialog recalculating its z-index when it is opened, or clicked or whatever.
I am unable to drag or resize a dialog box. I have downloaded all dependencies and tried various settings in options, but still no joy:
<script type="text/javascript">
function dialog(){
$("#paragraph").dialog({
title: 'This is a title',
width: 300,
height: 50,
modal: true,
draggable: true,
autoOpen: false,
buttons: {
'Remove': function () { // remove what you want to remove
// do something here
alert("this is a test alert!");
$(this).dialog('close');
$("#flex1").flexReload();
},
Cancel: function () {
$(this).dialog('close');
}
}
});
$("#paragraph").dialog("open");
};
</script>
<p id="paragraph">This is some paragraph text</p>
Downloads of the jQuery UI library are customizable. If your copy doesn't include the 'Draggable' and 'Resizable' interactions, your dialog will not be draggable or resizable.
Well maybe add resizable option and set it to true.
Also the dialog is draggable by the title bar not the entire dialog body.
Any good?
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>
I have two jQuery UI dialogs which are basically the same. They have the same positions. The problem is that they are displayed in the wrong positions in the browser, not 200 &200 from top & left of the viewport, plus they are not on top of each other.
The x position seems correct but not their y values.
What am I missing?
See JSFiddle example here
Addition:
<script type="text/javascript">
$(document).ready(function()
{
$( "#one" ).dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
});
// $( "#two" ).dialog({
// closeOnEscape: false,
// open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
// });
});
</script>
</head>
<body>
<div id="one" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ddd">Hello</div>
<div id="two" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ccc">Hello 2</div>
</body>
It has to do with the position: relative that uid dialog sets.
http://jsfiddle.net/bJEgR/1/
Since I've not worked with this particular plugin before, I'm not sure if this is a good idea or not, but as a proof of concept, it shows that it is the position: relative setting. I used to Firebug to inspect the css.
$( "#one" ).dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").css('position','absolute');
$(".ui-dialog").css('top','100px');
$(".ui-dialog").css('left','100px');
},
position: [200,200]
});
$( "#two" ).dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").css('position','absolute');
$(".ui-dialog").css('top','100px');
$(".ui-dialog").css('left','100px');
},
position: [200,200]
});
Wrapping the dialogs with a div which has a declared height seems to fix it. I don't know if this is a bug.