Disable click when displaying jQuery dialog

Question

I am new to jQuery. I am creating an asp.net MVC application.

I am displaying a dialog when user clicks on a button using the following code.

  $(document).ready(function () {
    $dialog = $("#quantityDialog").dialog({
      autoOpen: false,
      title: 'Add to Cart',
    });
    $('.AddToCart').on('click', function () {
      $dialog.dialog('open');
    });
  });

HTML:

<div id="quantityDialog" style="display:none">
...
</div>

The dialog is working fine.

I need to restrict the user from being able to click other elements of the page when the dialog is being displayed.
Also when the user clicks elsewhere (outside the dialog box) the dialog has to be closed.

How can I achieve this. Help me out.

You need an overlay element to go under the dialog. There is an option to jQueryUI Dialog to do that already see jqueryui.com/dialog/#modal-confirmation — GillesC
– GillesC, Commented Jul 15, 2014 at 8:52
You can use colorbox jacklmoore.com/colorbox to show dialog it will give you more functionality like iframe inline etc to open dialog — Yogesh Sharma
– Yogesh Sharma, Commented Jul 15, 2014 at 8:53

RGS · Accepted Answer · 2014-07-15 09:03:22Z

1

 $("#loadPreviewDiv").click(function () {
        $('#dialog').dialog({
            title: "Dialog box",
            height: 300,
            modal: true,
            open: function() {
            $('.ui-widget-overlay').on('click', function() {
                $('#dialog').dialog('close');
            })
        },
            buttons: { "close": function() { $(this).dialog("close"); } } 
        });
 });

Demo:

http://jsfiddle.net/2hyAh/1/

answered Jul 15, 2014 at 9:03

RGS

5,2217 gold badges45 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RandomUser Over a year ago

your solution works but when I click outside the box the dialog is not getting closed!

Bharat Rathavi · Accepted Answer · 2014-07-15 09:14:53Z

1

Here is your solution,

Diable click of other area

Here you can add one dom to overlap the other area
```
<div class="overlay"></div>
```
And write the css for this dom
```
.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}
```
When you open the popup, you can show this overlay by simply writing this.
```
$('.overlay').show();    
```
Note : Make sure that popup z-index is greater than the overlay.

Close the popup on click outside of it

$('body').click(function(e){
    if(!$(e.target).is('.AddToCart, #quantityDialog'))
    {
        // write logic to close the popup here
        $('.overlay').hide();
    }
})

answered Jul 15, 2014 at 9:14

Bharat Rathavi

2703 silver badges13 bronze badges

Comments

Rahul Gupta · Accepted Answer · 2014-07-15 09:35:25Z

1

DEMO

JS code:

$(document).ready(function () {
    $dialog = $("#quantityDialog").dialog({
      autoOpen: false,
      modal:true,//to display an overlay
      title: 'Add to Cart',
    });

$('.AddToCart').on('click', function () {
  $dialog.dialog('open');
});



/*When clicked on overlay close the dailog*/
   $('div.ui-widget-overlay').click(function(){
       $dialog.dialog('close');
   });
  });

answered Jul 15, 2014 at 9:35

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Comments

Runcorn · Accepted Answer · 2014-07-15 09:12:36Z

0

You can use modal property of dialog box to achieve the background overlay ,

 $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        .....
    });

And to close on overlay you can bind the .ui-widget-overlay in open of dialog box as ::

$("#dialog").dialog({
        ......
        open: function(){
            $('.ui-widget-overlay').on('click',function(){
                $('#dialog').dialog('close');
            });
        ....
        }

edited Jul 15, 2014 at 9:12

answered Jul 15, 2014 at 9:05

Runcorn

5,2245 gold badges37 silver badges52 bronze badges

1 Comment

RandomUser Over a year ago

solution works but when I click outside the box the dialog is not getting closed!

Collectives™ on Stack Overflow

Disable click when displaying jQuery dialog

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related