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.
Related
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.
If you create a jQuery UI button in Yii, the default behavior is that the text of the button should show as the tooltip. You can override this with the 'label' option, but neither of these works for me in Yii. Any suggestions? Here is the code I'm using:
<button id="btnClose"></button>
<script type="text/javascript" >
$(function() {
$("#btnClose").button({
text: false,
label: 'Close Wizard'
});
});
</script>
The button shows up just fine, just without a tooltip.
Thanks!
A tooltip is set in the title attribute.
The example you give us isn't Yii but plain jQuery.
<script type="text/javascript" >
$(function() {
$("#btnClose").button({
'text': false,
'title': 'Close Wizard'
});
});
</script>
I have the following html:
<ul id="sortable">
<li class="ui-state-default">1
<div class="dialog-modal" title="Animal Facts" style="display:none;">
<p>What is the fastest animal on Earth?</p>
</div>
</li>
<li class="ui-state-default">2
<div class="dialog-modal" title="Animal Facts" style="display:none;">
<p>What is the largest animal on Earth?</p>
</div></li>
and the following jQuery code:
$( ".dialog-modal" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
});
$('.ui-state-default').click(function() {
$(this).find("div").dialog( "open" );
});
This does not open the modal dialog on click, what am I missing?
Thanks for the help.
This is a current behavior of the jQuery UI dialog.
When defined the jQuery UI dialog is created and appended to the body.
The workaround solution is to append the dialog to its original parent after the creation like:
$(function () {
$(".dialog-modal").each(function (index) {
var origContainer = $(this).parent();
$(this).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
create: function () {
$(this).closest('div.ui-dialog')
.click(function (e) {
e.stopPropagation();
});
}
}).parent().appendTo(origContainer);
});
$('.ui-state-default').click(function (event) {
$(this).find("div").find(".dialog-modal").dialog("open");
});
});
An important note: look at the create event defined; it's necessary because, the open dialog method executed on the .ui-state-default class elements click is triggered on every click inside the dialog! It's formally correct because now the dialog is contained inside its parent and the click is propagated to the parents with .ui-state-default class. With stopPropagation the problem is solved.
It's a bit hackish, but it works.
Working fiddle: http://jsfiddle.net/IrvinDominin/Avtg9/8/
With the future version of jQuery UI 1.10.0 will be added the option appendTo, to handle this situation without any workaround http://api.jqueryui.com/dialog/#option-appendTo
I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:
$(function(){
$( "#toogleMAmaximized" ).dialog({
title: 'Missions and Achivments',
autoOpen: false,
height: 500,
width: 700,
modal: true,
dialogClass: 'noPadding',
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
$( "#toogleMAminimized" ).click(function() {
$( "#toogleMAmaximized" ).dialog( "open" );
$( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
});
})
<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>
Just in case you need it, my html code
<div id="toogleMAmaximized" >
<div id="missions">
<div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div>
</div>
<div id="achivments">
<div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div>
</div>
</div>
As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class
Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.
I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.
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.