I have an example here.
When I open the window, it is vertically centered, but the horizontal center is far down. I want to get it centered on the screen when it pops up.
This is the jscript...
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
I've tried using position: 'middle',, but it didn't work.
look at the documentation of position
http://api.jqueryui.com/dialog/#option-position
here is how you use it:
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
I read through the documentation. I wanted the dialog box to be
centered, in the middle of the page... not centered, and at the very
top. Just in the middle of the page. I've tried center left, center
center ...How come there's just no center middle? – webfrogs Sep 6 '13
at 22:58
Someone please come back... – webfrogs Sep 7 '13 at 2:04
You can use any of the following to make it in the middle of the page
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center middle", of: window },
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
OR
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
position: ['center', 'middle'],
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
Related
I want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
I'm trying to use a JQuery dialog for deletion confirmation but I cannot seem to get it to show in front of everything so that it prevents interaction with other controls until its closed.
Below is my code:
<script>
function deleteItem(id) {
$('body').append('<div id="confirm" title="Confirm Delete">' +
'<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' +
'The item will be deleted. Are you sure?</p></div>');
$(function() {
$('#confirm').dialog({
resizable: false,
height: 185,
modal: true,
show: {
effect: 'slide',
duration: 200
},
hide: {
effect: 'slide',
duration: 200
},
buttons: {
'Delete': function() {
//Deletion code
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
};
</script>
Please help. Thank you.
change accordingly.
modal:false - for bring dialog as normal alert.
modal:true - it brings dialog front of the page.
See this example. Demo
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true,
title: 'message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
item.remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
UPDATED
Ok. so you need finally this.
.ui-widget-overlay {
background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: 2;
filter: Alpha(Opacity=30);
}
For the last few hours I've been trying to have an animated dialog that will initiate a puff animation, is draggable and when closed will center again when opened. As of now I have it so the animation initiates, it's draggable but when I close and open it, it's fixed in the same position it was dragged to.
I've tried using the open function, complete function in show/hide, setting the div/dialog in a function, using position: center and yeah...
Anyway, here is the code:
frm_location.jsp:
//this is in an "a" tag, can't seem to get it to display properly
id="NEW_LOCATION_BUTTON" href="javascript:openDialog('#dialog-form','#popupBoxCancel','orange-theme','625');" class="btn_sel">
jQueryDialog.js:
function openDialog(_dialog, _cancel, _theme, _size) {
jQuery(document).ready(function ($) {
$(_dialog).dialog({
autoOpen: true,
width: _size,
modal: true,
position: "center",
resizable: false,
draggable: true,
dialogClass: _theme,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
$(_cancel).click(function() {
$(_dialog).dialog("close");
});
}
Take a look at this. I'm not sure how you're reopening the dialog, but this should do. jsfiddle code
<div id='dialog'>PUFF</div>
<button id='reopen'>OPEN DIALOG</button>
$(function () {
$('#reopen').click(function () {
$( "#dialog" ).dialog({ position: 'center'});
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: true,
width: 200,
modal: true,
position: "center",
resizable: false,
draggable: true,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
});
Please review this jsFiddle...
This is a jQuery UI dialog box utilizing an ajax request to pull up the content. I can't seem to figure out what's wrong, but nothing's popping up other than the blank dialog.
HTML...
<div id="#griffin"></div>
<ul>
<li>
</li>
</ul>
JavaScript...
$(function() {
$("#griffin").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"I have Read and Understand": function() {
$(this).dialog("close");
}
}
});
$(".griffin-style").on("click", function(e) {
e.preventDefault();
$("#griffin").html("");
$("#griffin").dialog("option", "title", "Loading...").dialog("open");
$("#griffin").load(this.href, function() {
$(this).dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
Thoughts?
You must give the commands under buttons parameter.
http://jsfiddle.net/aEwUF/4/
$(function() {
$( "#griffin" ).dialog({
resizable: false,
height:150,
modal: true,
buttons: {
"I have read and understand the terms": function() {
$( this ).dialog( "close" );
$("p").html("You have accepted the terms");
//write ajax requests in here..
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
you need to add a jQuery UI dialog open function
http://api.jqueryui.com/dialog/#method-open
you will have to run this locally or on the same server since the jsfiddle cant pull your external file due to same origin policy
http://jsfiddle.net/aEwUF/7/
$(function() {
$("#griffin").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"I have Read and Understand": function() {
$(this).dialog("close");
}
},
// add this
open:function(event,ui){
$("#griffin").html("");
$("#griffin").load($(".griffin-style").attr("href"), function() {
$("#griffin").dialog("option", "title", $(this).find("h1").text());
$(".griffin-style").find("h1").remove();
});
}
});
$(".griffin-style").on("click", function(e) {
e.preventDefault();
$("#griffin").html("");
$("#griffin").dialog("option", "title", "Loading...").dialog("open");
$("#griffin").load(this.href, function() {
$("#griffin").dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
A while ago, I had a problem with pop-up dialogs that had a height going beyond the background. The translucent overlay stopped in the middle and everything underneath was black. My friend fixed it for me. He said:
"For the dialog issue I used 900px for width and height. There's no way to accomplish the fix purely with CSS because the values eventually get overwritten when the javascript is called to display the dialog. What we need to do is after opening/creating the dialog is to resize the background overlay to the dimensions of the page. You can see this in the index.html for bonus features."
Unfortunately, this fix doesn't apply when the width and height are set to 'auto'.
Can someone please help me here? Thanks.
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '900',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
adjustJQueryDialogOverlay();
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});