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']);
});
Related
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();
});
});
});
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");
}
}
});
Lock resizing of popup window? not even drag should be possible
newWidth < 650 ? window.innerWidth = 650 : $(window).height();
newHeight < 400 ? window.innerHeight = 400 : $(window).width()
/* OR $(function() {
$( "#resizable" ).resizable({
maxHeight: 450,
maxWidth: 650,
minHeight: 150,
minWidth: 200
});
}); */
in both dragging is possible...
use Jquery Modal Dialog box.
$("#dialog-message").dialog({
modal: true,
draggable: false, //draggable false
resizable: false, //resizable false
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});
check out this example on JSFIDDLE
This is my javascript function to open a jquery dialog.
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
How can I hide the part show: 'slide, from IE ?
var options = {
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
};
if ( ! $.browser.msie){
options ['show'] = 'slide';
}
$('#dialog').append(iframe).appendTo("body").dialog(options);
try this
if ( ! $.browser.msie){
$( "#dialog" ).dialog( "option", "show", "slide" )
}
jquery has removed support for jQuery.browser.msie from version >= 1.9
so
var opts = {
autoOpen : false,
modal : true,
resizable : false,
show : 'slide',
width : 800,
height : 700,
close : function() {
}
};
if (!/msie/.test(window.navigator.userAgent)) {
opts.show = 'slide';
}
('#dialog').append(iframe).appendTo("body").dialog(opts);
$('#dialog_click').click("callback", function() {
$('#dialog').dialog('open');
return false;
});
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
});
if(!$.browser.msie) {
$( "#dialog" ).dialog( "option", "show", "slide" );
}
There are several workarounds for this (conditional comments for the whole script, altering the property later, etc) but noone has posted a solution that does EXACTLY what you asked: excluding a portion of javascript only in IE.
Then take a look at this:
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
/*#cc_on #*/
/*#if (true)
#else #*/
show: 'slide',
/*#end #*/
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
IE won't include show: 'slide',, while non-IE browsers won't read the Conditional Compilation Statements , so the condition will fall in the (not-commented) else part.
Read more on Conditional Compilation Statements
There is several thing you can do.
First there are conditional comments , ie
<!--[if !IE ]>
<script>
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
</script>
<![endif]-->
Or you can check jquery browser variable , as other guys are pointing.
Also if you are going this way, and you really want to target old version of IE you can use some functions specific to it ( like attachEvent )