pop up message

Question

User-583959464 posted
how to create a pop up window cover the top ,it will cover all the elements on the web page?

Answer 1

User-474980206 posted

typically you use an absolutely positioned div with a z-index. this is often called a modal dialog. there are a lot of javascript libraries to implement this. just google.

  https://jqueryhouse.com/30-best-jquery-modal-dialog-boxes/

Answer 2

User-943250815 posted

Try SweetAlert2 https://sweetalert2.github.io/

Answer 3

User1535942433 posted

Hi 20141113,

Accroding to your description,I suggest you could use dialog.

Since you don't post your codes to us,I have created a demo.

More details,you could refer to below codes:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

    <script>
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                dialogClass: 'dialog_fixed,ui-widget-header',
                modal: true,
                height: 600,
                width: 1000,
                position: { my: "center", at: "top", of: window },
                draggable: true,
                close: function (ev, ui) { $(this).hide(); },
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $('.button').click(function () {
                $('#dialog').dialog('open');
            })

        });

    </script>

 <div>
            <div id="dialog" title="Basic dialog">
                <p>Dialog box</p>
            </div>
            <a href="#" class="button">The button</a>
        </div>

Result:

Best regards,

Yijing Sun

Answer 4

User-583959464 posted

I already set the z-index to 999, but it seems sometime it is not on the top of the page, sometime, it can show on the top , why?<br>
how to set to ensure it can show on top to cover the page in all situations ?

Answer 5

User1535942433 posted

Hi 20141113,

What do you have used to popup up message?I suggest you could use dialog and it could set position: { my: "center", at: "top", of: window } to show it in the top.Or you could set css style.

Could you post your codes to us?It will help us to solve your problem.

Best regards,

Yijing Sun