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.
Related
I have tried to get a dialog (#dialog) stay inside a container div (#dialogContainer), i.e. I don't want it to be possible to drag the dialog outside the boundaries of the container div in the ui, but no success. I thought that the "appendTo" setting would fix this, but not. Any help is appreciated!
Here is an example that shows that it is indeed possible:
https://jqueryui.com/dialog
Code:
<div id="dialogContainer" style="width:600px;height:500px;border:1px solid blue;"></div>
<div id="dialog" title="Dialog Title">
This is dialog content.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
position: {
my: 'left top',
at: 'left',
of: $('#dialogContainer')
},
draggable: true,
appendTo: "#dialogContainer",
modal:true
});
});
</script>
You can use the following code to restrict the dialog so it can't be dragged outside a container:
$("#dialog").dialog({
...
})
.parent().draggable({
containment: '#dialogContainer'
});
See here for a Fiddle.
My jQuery dialog always opens in the top left corner of my browser window.
The following shows my code after simplification.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').click(function(event){
$(function() {
$('#dialog').dialog({
autoOpen: false,
width:500,
height:500,
position:'center'
});
});
$('#dialog').dialog('open');
});
</script>
</body>
</html>
Any ideas on what I need to do so that it opens positioned in the center?
It is highly1 unlikely that this is the cause of your problem, but I was having the same issue, and found this bit of code in jquery-ui.js :
// /1.10.0/jquery-ui.js:
target = $( options.of )
...
// line 12053
if ( target[0].preventDefault ) {
// force left top to allow flipping
options.at = "left top";
}
That bit of code checks to see if the target element has the preventDefault function defined. By default, target[0] is going to equal the window object, which does not have preventDefault. However, in my case, I had defined a function called preventDefault in the window object's global scope. My window.preventDefault caused the if-block to evaluate to true, thus overriding the default options.at value of "center".
As I said, it's highly1 unlikely that you have defined the function window.preventDefault, but that is what caused it for me.
1 EDIT: based on the comments, it is actually not so unlikely. Glad I could help everyone.
Use this
<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').on('click', function(event){
$(function() {
$('#dialog').dialog({
autoOpen: false,
position:'center'
});
});
$('#dialog').dialog('open');
});
</script>
Greetings.
Use next dialog options
$('#dialog').dialog({
autoOpen: false,
width:500,
height:500,
position:
{
my: "center",
at: "center",
of: window
}
});
JSFiddle DEMO
the answer is pretty simple, Just we need to add the jquery file jquery-1.11.1.js and it's all
I was having an issue where it would be centered in IE11, but on IE7 it would be top left corner even with the position attribute.
I am using jqueryUI 1.11.2, and it appears support for IE7 and older was removed in 1.8.2 or somewhere around there. Anyways, the solution was to put double quotes around my values like so:
$('#dialog').dialog({
autoOpen: false,
modal: true,
width: '200',
title: 'Confirm Delete',
position: {
my: "center",
at: "center",
of: $("body"),
within: $("body")
},
buttons: {
'Delete': function () {
$('#btnDeleteAll').click();
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog('close');
}
}
});
I just tried single quotes and those work too.
I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...
In my web page, here is the head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />
and the body:
<div id="dialog_test" title="Test">
TEST
</div>
GO
<script>
$(function() {
$( "#dialog_test" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Ajax": function() {
$.ajax({
"url" : "http://jquery.malsup.com/block/wait.php",
"success" : function(json) {
$( "#dialog_test" ).dialog( "close" );
}
});
}
}
});
$( "#go" ).click(function(event) {
event.preventDefault();
$( "#dialog_test" ).dialog( "open" );
});
});
$(document)
.ajaxStart(function() {
$.blockUI({
theme: true
})
})
.ajaxStop($.unblockUI);
</script>
Any idea?
You don't specify what you have tried with z-index.
The blockUI plugin has an option to change the z-index of the message it creates (documentation):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO
Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.
I've found two possible ways around this:
'destroy' the dialog when it is closed and recreate it when
it is opened.
rather than blocking the whole UI, just block the
dialog. This can be done using the widget method, like this:
$( ".selector" ).dialog( "widget" ).block({
theme: false,
message: '<h1>Wait for me please...</h1>',
css: { border: '3px solid #a00' }
});
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?
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.