jqModal dialog always under overlay
I have the following code, and am at my wit's end because the dialog always appears under the overlay. Any advice will be most appreciated:
<head runat="server">
<title></title>
<link href="../Styles/jqModal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#shift-edit-popup
{
display: none;
}
</style>
<script src="../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../Scripts/jqModal.js" type="text/javascript"><开发者_高级运维;/script>
<script type="text/javascript">
$(function () {
$("#shift-edit-popup").jqm({
toTop: true
}).jqmAddTrigger("#show-button");
});
</script>
</head>
<body>
<form id="form" runat="server">
<input id="show-button" type="button" value="Show" />
<div id="shift-edit-popup">
<div>
<asp:Label ID="resourceLabel" runat="server" AssociatedControlID="resourceList">Resource:</asp:Label>
<asp:DropDownList ID="resourceList" runat="server" DataTextField="Name" DataValueField="ResourceId" Width="120px">
</asp:DropDownList>
</div>
</div>
</body>
From what I saw and tried you need to use the included jqmWindow class on your dialog div and drop the this:
<style type="text/css">
#shift-edit-popup
{
display: none;
}
</style>
Your code should look something like this:
<head runat="server">
<title></title>
<link href="Scripts/jqModal.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jqModal.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#shift-edit-popup").jqm({
toTop: true,
modal: true
}).jqmAddTrigger("#show-button");
});
</script>
</head>
<body>
<form id="form" runat="server">
<input id="show-button" type="button" value="Show" />
<div id="shift-edit-popup" class="jqmWindow">
<div>
Resource:
<select><option value="1">One</option><option value="2">Two</option></select>
</div>
</div>
</body>
(You just need to change the script and css references accordinly)
I believe you need to set position of the shift-edit-popup:
<style type="text/css">
#shift-edit-popup
{
display: none;
position : relative;
}
</style>
Which version of jqModal.js do you use?
The last official version from http://dev.iceburg.net/jquery/jqModal/ is not compatible with jQuery 1.4.x (see http://forum.jquery.com/topic/jqdnr-dragging-problem-with-jquery-1-4 and http://www.trirand.com/blog/?page_id=393/bugs/jqgrid-jquery-1-4/).
If in your version "$()" exist inside of jqModal.js, it should be replaced with "$(document)". You can also download fixed version as a part of jqGrid package: http://www.trirand.com/blog/?page_id=6.
Check the z-index values of the overlay and the modal box.
Perhaps this will be helpful reading: Understanding z-index
I ran into a problem like this not to long ago. Try changing the DOCTYPE to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加载中,请稍侯......
精彩评论