I am using a jQuery UI modal dialog on a JSF page that also has primefaces components inside the dialog div. When I set the modal property to true the overlay covers up the dialog content as well. Here is my dialog definition:
if (jQuery("#rangeChoice").val() == 'Custom') {
jQuery("#rangeDialog").dialog({
modal: true,
draggable: false,
minHeight: 375, minWidth: 450,
resizable: false,
title: 'Create Custom Date Range',
closeOnEscape: false,
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }
});
return;
}
and my content for the div:
<div id="rangeDialog" style="display: none;">
<div class="customRangeButtons" style="z-index: 4999;">
<!-- Clipped for brevity, the buttons alone are covered by the overlay -->
<span>
<p:commandButton value="Cancel" actionListener="#{bean.cancelCDR}" update="pGraphs"/>
</span>
<span style="margin-left: 300px;">
<p:commandButton value="Submit" type="submit" action="#{bean.saveCDR()}" update="pGraphs"/>
</span>
</div>
I am using Primefaces 2.2.1, and I have a feeling related to who is controlling the overlay div. I did try adding my own overlay div in the page and showing it in the open event of a non modal dialog. It also covered the dialog for z-index values > 3. Values 1 and 2 were okay though some other controls on the page were above that. Note this is a workaround to using a p:dialog as it was causing my actionListeners not to fire.
What else can I try?
The problem is the z-index on the div tag is being overridden by the .dialog itself. The .dialog's default z-index is 1000. You can change this when you create the dialog by changing the zIndex option like so:
jQuery("#rangeDialog").dialog({
modal: true,
draggable: false,
minHeight: 375, minWidth: 450,
resizable: false,
title: 'Create Custom Date Range',
closeOnEscape: false,
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
zIndex: 4999
});
See the options tab in the documentation for more info:
http://jqueryui.com/demos/dialog/
Related
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 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.
If you are calling a modal dialog box in jquery, but have the image file location in an array, how would you call this dialog box where if they clicked the link, the image would pop up? Right now, because of a loop it is obviously only using the last file name.
function showDialog(){
$("#image_viewer").html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
$("#modalIframeId").attr("src","image_view.cfm");
return false;
}
$(document).ready(function() {
$("#image_viewer").dialog({
autoOpen: false,
modal: true,
height: 800,
width: 600
});
});
You're trying to use an iframe as a modal dialog, you should just use a DIV.
<!--- HTML --->
<div id="imageDialog" class="dialog" style="display:none;"></div>
Then you can output a list of links to your images like this:
<!--- CFML --->
<cfoutput query="qImages">
#qImages.label#<br />
</cfoutput>
Finally, you can open the URL for the image directly into the modal dialog using a bit of class trickery.
<!--- jQuery --->
$(document).ready(function(){
$('.dialog').dialog(
{
autoOpen: false,
modal: true,
width: 440,
height: 330,
title: "Image Viewer"
}
);
$('a.image').click(function(e){
$('#imageDialog').load( $(this).attr('href') ).dialog("open");
e.preventDefault();
});
});
I'm using a jquery dialog.
The content of this dialog is dynamic so the height change when the dialog is open.
$("#a_div").dialog({ width: 400 });
The dialog initially appears center in the page. but when the height change is no more center.
How can i refresh the dialog's position without close and reopen it?
thanks
You need to re-set the position by doing:
$("#a_div").dialog({
position: { 'my': 'center', 'at': 'center' }
});
The position is set once when creating the dialog, but can be altered afterwards (or just re-set at the same value, forcing jQuery to recalculate).
See this demo: http://jsfiddle.net/petermorlion/3wNUq/2/
If you want to use the exact position settings as used by jquery ui for the initial positioning, you can grab the options from the jquery ui code and use them again any time you want to reposition your dialog.
function refreshDialogPosition(id) {
$("#" + id).position({
my: "center",
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function (pos) {
var topOffset = $(this).css(pos).offset().top;
if (topOffset < 0) {
$(this).css("top", pos.top - topOffset);
}
}
});
}
Use:
refreshDialogPosition("YourDialogId");
This will also make sure your title bar is always visible. Otherwise your title bar will be outside your screen when using dialogs with large content. (content height > window height)
Have a nice day.
You can try to resize the dialog using its classes by JQuery directly (documentation here)
The basic structure of JQueryUI Dialog is this:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
So, maybe you should play with classes's width and height to set the best.
Another solution is to set dialog's width directly before open (when your data is successfully loaded):
$("#a_div").dialog({ width: 400 });
$.get('my_url.php',function(data){
$('#a_div .ui-dialog').css('width','400px');
// Or...
$('#a_div').css('width','400px');
});
I hope it helps you.
Marked as Correct didn't work for me. It persists position once it opened.
Following code will reset dialog position, every time you open/re-open it.
$dlg.dialog({
open: function(event, ui) {
// Reset Dialog Position
$(this).dialog('widget').position({ my: 'center', at: 'center', of: window });
}
});
$dlg.dialog('open');
In an .aspx page, I have a div with a asp:textbox and asp:linkbutton with visibility set to false. I have a link in the page that would open a modal window and show the content of the div. when the asp:linkbutton is clicked on the serverside code textbox value is not set.
Click here
<div id="ShowModal" visible="false">
<asp:textbox id="txtName" runat="server" width="200"></asp:textbox>
<asp:linkbutton id="btnCreate" runat="server" text="Save" onclick="btnCreate_OnClick"/>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$('#ShowModal').dialog({
autoOpen: false, height: 200, width: 400, modal: true
});
$('a#OpenModal').click(function() {
$('#ShowModal').dialog({ modal: true });
$('#ShowModal').dialog('open');
return true;
});
});
</script>
On the server-side event handler the text of the textbox is "".
Could anyone help on this issue
answering my own question for future reference.
$("#ShowModal").dialog({
height: 200, width: 400,
modal: true,
width: 433,
modal: true,
open: function () {
$('#ShowModal').parent().appendTo($("form:first"));
}
});