Dialogue box

Posted on 2012-08-18
Last Modified: 2012-08-21
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
Question by:tonelm54
    LVL 53

    Expert Comment

    The solution is HERE

    LVL 49

    Expert Comment

    by:Julian Hansen
    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=""></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


    Author Comment

    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
    LVL 49

    Accepted Solution

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now