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 make a parent --> node relationship in css?

    CSS: How do I 'raise' the last photo in this page?

    How to apply css to all the divs in hierarchy in HTML?

    How to select nth line of text (CSS/JS)

    How to make images go inline vs break to a new line?

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    How to show Bootstrap 3 popover scroll only when needed

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    how to create a multi column list with css?

    How to position div so that it renders outside container

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to modify divs in grid template site?

    How to change the css of the div that i just created in code

    how to add a custom font to rails app

    Pagination: How to display a long text as book pages?

    How to convert css margin value to pixels with just plain javascript?

    How to give viewers custom CSS option

    How to build a dashed line that has borders on both sides, using CSS

    How to recalculate the css url paths when moving it to a different folder

    How to get a style attribute from a CSS class by javascript/jQuery?

    How to implement z-index and overflow

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    How to change the background color of a div in HTML/CSS

    How to enable CSS editor features in VS 2012?

    How to change the font size in table cells according to cells content?

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How do I select immediate children in jQuery [closed]

    How to shift a background image with css

    jQuery - How to get elements height value and use it in another element via css code?