jQuery UI Widgets › Forums › Dialogs and Notifications › Window › BringToFront and isModal
This topic contains 4 replies, has 2 voices, and was last updated by Makla 11 years, 1 month ago.
-
AuthorBringToFront and isModal Posts
-
If you set isModal: true and then call jqxWindow(‘bringToFront’); the window z-index is lower then “modal rectangle”.
Hello Makla,
We tested for the reported issue with the following example, but everything works fine at our side. Please post a sample code which demonstrates it and make sure you are using the latest version of jQWidgets (3.1.0).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#jqxwindow').jqxWindow({ isModal: true }); $('#jqxwindow2').jqxWindow({ width: 230, height: 70, isModal: true }); $("#jqxbutton").jqxButton({ height: 30 }); $('#jqxbutton').click(function () { $("#jqxwindow").jqxWindow('bringToFront') }); }); </script> </head> <body> <div id='content'> <div id='jqxwindow'> <div> Header</div> <div> Content</div> </div> <div id='jqxwindow2'> <div> Header2</div> <div> <input type="button" id="jqxbutton" value="Invoke the bringToFront method" /></div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Your code does work, I spend some time to track the problem down and it accursed when you open modal window from another window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#jqxwindow').jqxWindow({ width: 300, height: 200 }); $('#jqxwindow2').jqxWindow({ autoOpen: false, height: 179, isModal: true, width: 300 }); $("#jqxbutton").jqxButton({ height: 30 }); $('#jqxbutton').click(function () { $("#jqxwindow2").jqxWindow('open'); $("#jqxwindow2").jqxWindow('bringToFront'); }); }); </script> </head> <body> <div id='content'> <div id='jqxwindow'> <div> Header</div> <div> <input type="button" id="jqxbutton" value="Invoke the bringToFront method" /></div> </div> <div id='jqxwindow2'> <div> Header2</div> <div> </div> </div> </div> </body> </html>
Hope it helps.
Hi Makla,
You are correct – the bringToFront method is not supported when the window is is modal. However, it is not needed, either – the newly opened window is already brought to front, with a higher z-index than the window it was opened from.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I know it is not needed. I was incidentlly leave bringToFront statement and experience that. I though that this should appear.
-
AuthorPosts
You must be logged in to reply to this topic.