How to make jQuery dialog popup stay in the center of browser (specific situation)


Tags: jquery,html,css,jquery-ui

Problem :

How to make jQuery popup stay in the center of the screen even while I'm scrolling up/down or change the size of the browser window? The scenario is like this: to delete a record of the database that are shown in a datatable. So in a Asp.Net MVC project, each datatable element has its own detail, edit and delete actions.

This div is supposed to hold the dialog:

<div id="dialog">
  <h3 id="deleteMessage"></h3>
</div>

and there is the dialog jQuery code:

var dialogDiv = $("#dialog");
var selectedItemId = null;
var selectedItemName = null;

  dialogDiv.dialog({
    title: "Confirm Delete",
    autoOpen: false,
    modal: true,
    draggable: false,
    resizable: false,
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
        },
        buttons: {
            "Delete": function () {                    
                $("#repFilterId").val(selectedItemId);
                $("#deleteForm").submit();

                clearLastValues();
            },
            "Cancel": function () {
                clearLastValues();
                dialogDiv.dialog("close");
            }
        }
    });

function btnDeleteClick(itemID, itemName) {
        selectedItemId = itemID;
        selectedItemName = itemName;

        $("#deleteMessage").html('Are you sure you want to delete "' +
            "<b>" + selectedItemName + "</b>" + '" report filter?');

        dialogDiv.dialog("open");

When I add some css like (from an answer that I got):

#dialog{
   position: fixed;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);
   }

I get this problem: enter image description here

the text "are you sure you want to delete..." stays in the center of the screen while the popoup dialog stays where it appears in the beginning and goes up/down with the page content (those 2 are separated from each-other!)



Solution :

If you give your dialog a height and width you can use the create initiator to pass it some css like this:

dialogDiv.dialog({
title: "Confirm Delete",
autoOpen: false,
width: 470,
height: 200,
modal: true,
draggable: false,
resizable: false,
closeOnEscape: false,
create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'top': '50%', 'margin-top': '-100px', 'left': '50%;', 'margin-left': '-235px' }); },
open: function(event, ui) {
    $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
 buttons: {
        "Delete": function () {                    
            $("#repFilterId").val(selectedItemId);
            $("#deleteForm").submit();

            clearLastValues();
        },
        "Cancel": function () {
            clearLastValues();
            dialogDiv.dialog("close");
        }
    }
});

See this JSfiddle example: https://jsfiddle.net/fictus/mjt25cap/


    CSS Howto..

    How to use jQuery without making a mess? [closed]

    How to replicate this button in CSS

    How to set CSS hover on input

    How to rearrange these elements with CSS?

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How to emulate this layout in CSS?

    How to avoid line breaks after “:before” in CSS

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles

    how to make div fixed at a particular scroll level

    WebPack how to put all css files into one css file

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    How to asynchronously load CSS using jQuery?

    Css: How to format and remove outlining borders of table on left and right side?

    How to keep footer at the bottom of the page when resizing on bootstrap

    how to get a rounded corner table with a body in different color with CSS?

    How to set both a background colour and a different text color on the same element

    Beginner: How to get a fixed element to a left position (float left?) - JSFiddle included

    how to get the site to not collapse with css

    Show tooltip content when its hovers

    How to get the actual rendered font when it's not defined in CSS?

    CSS - How to make a 100% height div not overlap it's contents when window is resized

    How do I get form-groups to overlap?

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How can I make a fixed div JUMP when scrolling?

    CSS: How do I make text indent for a label with long text?

    CSS Sprites - How to leave Hover button in depressed state

    How to set css class to div area of ckeditor

    How to point to a specific icon in an icon set?

    How to create a table inner bevel in HTML/CSS?

    How to center a relative div in my case?