[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 397
  • Last Modified:

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
0
tonelm54
Asked:
tonelm54
  • 2
1 Solution
 
COBOLdinosaurCommented:
The solution is HERE


Cd&
0
 
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.

<html>
<head>
<title>Title</title>
<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;
}
</style>
<script type="text/javascript">
$(function() {
  $('#overlay').height($(document).height());

  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'});
});
</script>
</head>
<body>
<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>
</div>
<div style="height: 900px">Rest of content and normal page here</div>
</body>
</html>

Open in new window

0
 
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
0
 
Julian HansenCommented:
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.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now