locked
pop up message RRS feed

  • Question

  • User-583959464 posted
    how to create a pop up window cover the top ,it will cover all the elements on the web page?
    Thursday, August 6, 2020 3:01 PM

All replies

  • 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/

    Thursday, August 6, 2020 3:18 PM
  • User-943250815 posted

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

    Thursday, August 6, 2020 4:45 PM
  • 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

    Friday, August 7, 2020 3:13 AM
  • 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 ?
    Friday, August 7, 2020 4:28 AM
  • 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

    Friday, August 7, 2020 8:48 AM