1

The jquery dialog is not popping up above all elements.First thing is I have pre-built framework which contains lot of sections. In one of the sections, I coded separate jsp page to display some graph and linked that jsp page in that section. On a button click in that jsp page, I am displaying one dialog. Below is the code snippet.

<body>
    <div id="container" style="min-width: 320px; height: 370px; margin: 0 auto"></div>
    <div id="hugedialog" title="dialog"></div>
    <script type="text/javascript">
        $(function() {  
            $("#hugedialog").dialog({
                autoOpen : false, 
                modal : true, 
                show : "blind", 
                hide : "blind", 
                width: 900, 
                height: 700
            });
        });

        function popupdlg() {
            $("#hugedialog").dialog("open");
        }
    </script>
</body>

So, I am calling the above function popupdlg when button is clicked. But the thing is if I open that page independently, it pops up correctly. When I embed this in pre-built section and click the button, the pop up displays only in that section rather than popping up over all the elements. I tried below things, but no luck 1).ui-dialog { z-index: 1000 !important ;}

2) Tried movetotop but still didn't work

Have been trying every possible answer, but couldn't succeed. Can someone please help how to overcome this issue such that dialog should display top of all the elements in that page? One idea comes to my mind is like I have to bind this div to top element in the page. So, by any chance can I get top reference and attach the dialog div to it from the current jsp page itself?

Evgeniy
  • 2,915
  • 3
  • 21
  • 35
rick
  • 4,665
  • 10
  • 27
  • 44

2 Answers2

1

Maybe z-index:9999?

You're using bootstrap I'm assuming. You could also try wrapping the "open" event in your own code.

wahwahwah
  • 3,254
  • 1
  • 21
  • 40
0

The type of popup that you are describing here is very similar to bootstrap modal as given at http://getbootstrap.com/javascript/#modals. If this is how you want your popup to be, I'll recommend you use the bootstrap modal. If by any chance, you cannot use bootstrap on popup load try giving some kind of overlay effect to the background, so that the popup will be visible boldened on top of other elements. On popup load make the background a little dark or reduce opacity. Hope this helps.

SohamKhare
  • 26
  • 3
  • It works when I execute it as separate page, it doesn't only when I embed to the pre built framework which means that other elements are hiding the pop up. – rick Nov 24 '14 at 08:20