How to disable all clicks outside jquery modal dialog?

Question

On my page there is a modal dialog which loads a site into iframe on click of a link. Here is the Jquery:

$(function () {
    $('.open-dialog').click(function () {
        $('#win-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '">      </iframe>');
        $('#dialog-overlay').fadeTo(400, 0.8);
        return false;
    });
    $('#win-dialog .close').click(function () {
        $('#win-dialog').fadeOut('normal', function () {
            $('iframe', this).remove();
        });
        $('#dialog-overlay').hide();
        return false;
    });    
});

And here is the HTML

 <div id='win-dialog'>
 <h3 class='title'><a class='close' href='#'>&amp;times;</a></h3>
 <div class='isi-dialog'>
 <div id='iframeContainer'/>
 </div>
 </div>
 <div id='dialog-overlay'/>
 <p> <a class='open-dialog' href='http://google.com'>Click here to open dialog</a>    </p>

As the question says, I want to disable all clicks outside the modal dialog just like javascript default alert popup does. How can i get it. Please help me.

Answer 1

If you have a properly set overlay div, this will capture the clicks and nothing will happen. It seems you have it.

Hope this helps, cheers

Answer 2

In css make height:100%, width:100%; of dialog-overlay

       .dialog-overlay{
           height:100%;
           width:100%;
           position:fixed;
           top:0px;
           left:0px;

         }

With the above code dialog-overlay will be placed at top the page and with width&height 100%;

In case you don't want 100% height & width

  <div class='outer>
    <div class='dialog-overlay'><!-- your div -->
      .
      . <!-- Content -->

    </div> 
  </div>

In css make

  .outer{
       position:fixed;
       height:100%; 
       width:100%;
       top:0px;
       left:0px;
       }
   .dialog-overlay{   /* adjust according to your requriement */
      top:35%; 
      left:40%;
      }