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?
Related
I am trying to bring a Dialog Box using jQuery-UI where I am facing one issue.
Dialog box is opened in screen with its Tiltle and close button.However I am not able to close the dialog.I understand the issue is, the dialog opened is not recognized and hence the close button is not working.I am able to select elements in parent page which should not happen.
I done several researches in Google and could not find a solution for that.
Please help me to sort out this issue. I am pretty new into Java Scripts and jQuery.
The following are my codes.
Using jQuery UI - v 1.9.0.
HTML code
<div id="dialog">
<p>This is test Dialog Box Message !!</p>
</div>
Controller.js
There is a button in my page and inside of this button click event,I have
$("#dialog").dialog({
autoOpen: false,
title: "Test Tiltle",
height: 300,
width: 350,
modal: true,
show: 'fade',
hide: 'fade',
close : function() {
$(this).dialog( "close" );
}
});
$("#dialog").dialog( "open" );
You left of a "
http://jsfiddle.net/uDYcJ/1/
$("#dialog").dialog({
autoOpen: false,
title: "Test Tiltle",
height: 300,
width: 350,
modal: true,
show: 'fade',
hide: 'fade',
close : function() {
$(this).dialog( "close" );
}
});
$("#dialog").dialog( "open" );
You can see from the colour formatting in your code block that you're missing a closing double quotes in your title:
title: "Test Tiltle,
Just close up that string:
title: "Test Tiltle",
I am building an MVC 4 app with lots of cells in a table which the user will click for additional data about the contents of that cell, so I pop up a modal jQuery dialog. I don't claim to have done this correctly but I have an Ajax form that contains nothing but a hidden field to send off the id of the clicked cell contents to the controller.
#Html.Hidden("selectedStatusId")
Then on clicking I get the id and put it into that hidden:
$(".statusCell").click(function () {
var statusId = this.id;
document.getElementById("getStatusDataForm").selectedStatusId.value = statusId;
$("#getStatusDataForm").submit();
$("#StatusData").dialog("open");
});
The next to the last line is submitting the form which returns a partial to the empty div:
<div id="StatusData" title="Status Details" class="selectedStatusDetail" style="display: none"></div>
Then I configure my dialog:
$(function () {
$("#StatusData").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: true,
width: 800,
show: {
effect: "fade",
duration: 100
},
hide: {
effect: "fade",
duration: 100
},
create: function (event, ui) {
// Center the dialog each time it re-opens
$(this).dialog('widget')
.css({ position: 'fixed' })
.position({ my: 'center', at: 'center', of: window, collision: 'fit' });
},
open: function (event, ui) {
// Remove the closing 'x' from the toolbar and replace it with the text 'Close'
$('.ui-dialog-titlebar-close')
.removeClass("ui-dialog-titlebar-close")
.html('<span style="float:right; margin-right: 10px; font-weight: normal;">Close</span>');
},
});
So the first time I click on one of the cells the dialog displays 107px below where it displays every time from then on. Other than that it works perfectly.
I have read about how you don't want to display before the dialog is loaded and I suspect that might be happening since the call to the db is async and I create the dialog before I know I get the data back. But this is the only way I have been able to get all of the rest to work.
Do I need to refactor the whole mess or is there a fix?
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 create a modal box everything works perfectly. However when I want to open another modal box by clicking the OK button from the first modal box this will open up the next modal box but the CSS for applying the image background with recude opactiy does not seem to be used once this happens.
Has anyone ever tried this and if so is there some way I can make this style still apply when the second modal box opens and the first one closes.
Thanks
Rory
$('#dialog1').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('#dialog2').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
$('#dialog2').dialog('open');
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
I managed to fix this by simply adding the overlay to the <body> via JQuery
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.