How can I get a DIV to centre on a page using jQuery and blockUI?

Asked 16/11, 2008 at 22:35 Answered 7/4, 2011 at 10:40

I'm trying to convert Matt Berseth's 'YUI Style Yes/No Confirm Dialog' so I can use it with the jQuery blockUI plugin.

I have to admit I'm no CSS guru but I thought this would pretty easy even for me....except 10hrs later I'm at a loss as to why I can't get the blasted thing to work.

The problem is that I can't seem to get the 'confirmDialogue' DIV to centre on the page without some artifacts showing above it. Alternatively if I reset blockUI's CSS settings by doing....:

$.blockUI.defaults.css = {};

.....I find that the DIV aligns left.

I've tried all sorts of stuff but CSS isn't my strong point being a server side app kinda guy :(

So if anyone out there who's a jQuery/blockUI/CSS wizard reading this...please can you have a go and let me know what I'm getting wrong?

Basically I followed the design template on Matt's blog and the HTML looks like the stuff below (the CSS is unchanged from Matt's sample). You can grab the png 'sprite' file from the complete sample project download at http://mattberseth2.com/downloads/yui_simpledialog.zip - it's a .net project but I'm just trying to get this to work in a simple html file, so no .NET knowledge required.

Anyway any advice and guidance would be really really really useful. I'll even incentivise things buy promising to buy you lashings of beer if we ever meet :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title></title>
  <script type="text/javascript" src="script/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="script/jquery.blockUI.js"></script>
  <style>
  .modalpopup
  {
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    position: absolute;
  }

  .container
  {
    width: 300px;
    border: solid 1px #808080;
    border-width: 1px 0px;
  } 

  .header
  {
    background: url(img/sprite.png) repeat-x 0px -200px;  
    color: #000;  
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 3px 10px;
  } 

  .header .msg
  {
    font-weight: bold;
  }         

  .body
  {
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 30px;
  } 

  .body .msg
  {
    background: url(img/sprite.png) no-repeat 0px -1150px;  
    float: left;
    padding-left: 22px;
  }  

  .footer
  {
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: none solid;
    border-width: 0px 1px;
    text-align:right;
    padding-bottom: 8px;
    padding-right: 8px;
  } 

  .close
  {
    right: 7px;  
    background: url(img/sprite.png) no-repeat 0px -300px;  
    width: 25px;  
    cursor: pointer;  
    position: absolute;  
    top: 7px;  
    height: 15px;
  }

  .modalBackground 
  {
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
  }     

  </style>
</head>

<body>

<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />

<div id="confirmDialogue" 
     class="modalpopup" style="display:none; text-align: center">
  <div class="container">
    <div class="header">
      <span class="msg">Are you sure?</span>
      <a onclick="return false;" class="close" 
         href="javascript: return false;"></a>
    </div>
    <div class="body">
      <span class="msg">Do you want to continue?</span>
    </div>
    <div class="footer">
      <input type="button" id="Button1" value="Yes" style="width:40px" />
      <input type="button" id="Button2" value="No" style="width:40px" />   
    </div>                                                
  </div>
</div>   

<script type="text/javascript">
  $(document).ready(function() {
    $('#triggerDialogue').click(function() {
      $.blockUI({ message: $('#confirmDialogue') });
    });
  });
</script>
</body>
</html>

@Owen - many thanks for that. I had to make a wee change in the .modalPopup CSS class in Matt's stylesheet to:

position: fixed;

....and it works. Much appreciated. I really gotta sit down with my O'Reilly CSS book which I never get a chance to read some night....:)

Skep answered 16/11, 2008 at 22:35 Comment(0)

hmm i'm not that familiar with blockUI, but the basics of centering a div are pretty universal. i'm assuming you want your #confirmDialogue div centered within the whole screen?

if so, you want to do a few things:

#confirmDialogue {
    position: fixed;    // absolutely position this element on the page
    height: 200px;      // define your height/width so we can calculate with it after
    width: 300px;
}

now your jQuery:

$('#triggerDialogue').click(function() {
    // to position #confirmDialogue, we need the window height/width
    var msg = $('#confirmDialogue');
    var height = $(window).height();
    var width = $(document).width();

    msg.css({
        'left' : width/2 - (msg.width() / 2),  // half width - half element width
        'top' : height/2 - (msg.height() / 2), // similar
        'z-index' : 15,                        // make sure element is on top
    });

    // etc...
});

basically, you want to fix the position of your #confirmDialogue (so that you can position it relative to the size of your window/document. left and top declarations are calculated based on the elements current height/width, and the window's height and document width.

Fornof answered 16/11, 2008 at 23:10 Comment(4)

@Fornof - very much appreciated :) – Skep 17/11, 2008 at 0:0

oh wow, i fail at math... glad you figured it out despite my inability to add or subtract properly :) i'll adjust the code accordingly – Fornof 17/11, 2008 at 0:2

Would be easier to position it at top/left:50%; and margin-top:-(height/2) and margin-left:-(width/2) – Kobe 25/2, 2010 at 12:18

There's a jQuery plugin to get the window dimensions cross-platform. I think it was actually included into the jQuery API at some point. – Gamboa 25/2, 2010 at 12:34

Take a look at this jQuery MSG plugin. It is very light weight and easy to use.

Example code

// default usage, this will block the screen and shows a 'please wait...' msg
$.msg();

// this will show a 'blah blah' msg
$.msg({ content : 'blah blah' });

more options please see this demo

full documentation please take a look at this post. download and source code links are included in the post.

Or if you just want to centralize some DOM element you can also try this plugin

Byrom answered 7/4, 2011 at 10:40 Comment(1)

Thanks Ben, since then I've started using jQuery UI which has solved pretty much all my problems. – Skep 7/4, 2011 at 12:7

You might find some useful info here. Using jQuery to center a DIV on the screen

Learnt answered 17/11, 2008 at 0:0 Comment(1)

@Learnt - thanks for the response. blockUI's own default CSS seemed to interfere in some way...and I then spent so long trying to solve I got cross eyed. Cheers, Kev. – Skep 17/11, 2008 at 0:6

you could also try out jquery ui dialog http://jqueryui.com/demos/dialog/

Abacist answered 25/2, 2010 at 12:10 Comment(1)

@Jason - yeah, at the time (2008) I think the jQuery UI stuff was a bit primitive, also my jQuery-Fu was at novice level. I actually ended up binning that code and used blockUI instead which is quite nice. But I'll revisit the jQueryUI bits again. Cheers. – Skep 25/2, 2010 at 16:4

Example code

Recommended topics

Hot tags