Dialogue box

Im sure Ive done this before, but cannot find any examples.

Ive got a div, which I load in the front of the screen (a modal message box), however I want to set the background to a 50% transparent image (so you can still see the background page), but the user cant click on anything.

Does anyone have any pointers, so on a click of a button I can load up a window which is a div, centred on screen with a fixed position. I can do this by changing the display and position elements, I just dont know how to overlay the page with a tranparent background and disable all elements from being clicked on.

Any ideas?

Thank you
Who is Participating?
Julian HansenConnect With a Mentor Commented:
Which background? Of the overlay - it is transparent

opacity: 0.95
filter: alpha(opacity=95);

Open in new window

You can play with the values above - closer to 0 means more transparent.
The solution is HERE

Julian HansenCommented:
Here is what you want - simple version (from memory) but simple to modify to your requirements. Will auto size based on modal_popup size.
Recommend you put your own div inside modal_popup to style with padding etc.
Close buttons etc can be added - post back if you need assistance.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#overlay {
  position: absolute;
  width: 100%;
  opacity: 0.95;
  filter: alpha(opacity=95);
  background: #000; 
  top: 0;
  left: 0;
#modal_popup {
   position: absolute;
   background: #fff;
   border: 2px solid red;
   width: auto;
<script type="text/javascript">
$(function() {

  var left = ($(window).width()  - $('#modal_popup').width() ) >> 1;
  var top =  ($(window).height() - $('#modal_popup').height()) >> 1;

  $('#modal_popup').css({left: left + 'px', top: top + 'px'});
<div id="overlay"></div>
<div id="modal_popup">
  <div style="width: 400px; padding: 15px">
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
<div style="height: 900px">Rest of content and normal page here</div>

Open in new window

tonelm54Author Commented:
julianH: Thats exactly what Im looking for, apart from the background isnt transparrent. Do you have any ideas on how to make the background transparrent?

Thank you
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.