I have a dialog that gets filled by an ajax call. I want to limit the max-height of dialog and also allow it to be scroll-able if this max-height is exceeded. The code below does exactly what I want.
The catch is I can not move the top of the dialog from the top position. I can move it left and right. I can't use center either as the dialog is displayed in a large scroll-able window. If I use firebug I can adjust the top property but cannot find where it is being set to zero.
$("#your-dialog-id").dialog({
open: function(event, ui) {
$(this).css({'max-height': 500, 'overflow-y': 'auto'});
},
autoOpen:false,
modal: true,
resizable: false,
draggable: false,
width: '690',
closeOnEscape: true,
position: 'top'
});
I want to adjust the dialog's y position so it is 20px from the top of the window. Any idea what I can do?
Changing the last value solved the problem:
position: ['center',20]
http://jsfiddle.net/chrisloughnane/wApSQ/3
The easiest way is:
$("#dialog").dialog({ position: { my: "center", at: "top" } });
using Jquery UI 1.11.4
var Y = window.pageYOffset;
$( "#dialogJQ" ).dialog({
modal: true,
closeOnEscape: false,
width:'auto',
dialogClass: 'surveyDialog',
open: function(event, ui) {
$(this).parent().css({'top': Y+20});
},
});
Related
I have a Jquery UI dialog and I close it by having it sized to zero and moving its position as in:
$('#myDialog').dialog({
...
beforeClose: function() {
$("#myDialog").dialog("widget").animate({
'position': 'absolute',
'left': '1250px',
'top': '20px',
'height': '0px',
'width': '0px'
}, 600);
},
...
This works fine but not if the window is resized because the goal is to have it move towards another element. I tried the following, but it does not work:
beforeClose: function() {
$("#myDialog").dialog("widget")
.animate({'height': '0px','width': '0px'},400)
.animate({'position': { my: "right top", at:"left bottom",
of: "#myButton" }},400);
},
This does resize the dialog to zero but the positioning does not work at all.
Can you suggest any way to do this?
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 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?
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 the following jqueryui dialog:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 420,
hide: 'slide',
modal: true,
buttons: {
'Annuler': function() {
$(this).dialog('close');
},
'Envoyer votre message': function() {}
}
When I display it with:
$('#question-annonceur').click(function() {
$('#dialog').dialog('open');
});
It's pretty centered. But when I scrolled vertically, it"s not centered anymore.
In fact, the dialog is still centered (regarding the scrollbar position set by the user), but the scrollbar had been scrolled up to the top of the window, and then, the dialog is not centered anymore (since it was centered regarding the new scrollbar position).
It's there a property I can set so that the scrollbar is not reset at the top like this?
Thanks.
Changing the CSS from position:absolute to position:fixed works for me :
.ui-dialog { position: fixed; padding: .1em; width: 300px; overflow: hidden; }
jQuery(window).scroll(function() {
jQuery('#dialog').dialog('option','position','center'); });
works for me in jquery 1.9
This is assuming your dialog has id="dialog"