How to close Jquery popup window when clicking of the "window area" and how to make the background dull?

Question

I have a popup box here and I would like to make two things. First , when the pop up window is shown I would like the "outside-of-the-pop-up-window area" to be shown a bit darker. Secondly, I would like the popup window to close when i click of it's area. Here is my script :

<script>
$("a").click(function(event) 
{
  $(this).parent().parent().children(".dialog").dialog(
  {
    width: 600,
    close: function( event, ui ) 
    {
      $(this).dialog('destroy');
    }
  });
});
</script>

and my html code :

  <div class="content">
     <h4>
        <a href="#" >AAAA </a> 
    </h4> 
    <img src="AAAA.jpg" />
    <div class="dialog" title="AAAA" >text
    </div>
  </div>

Is there a certain function that do this 2 things in jquery?

Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](//creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](//meta.stackexchange.com/q/5221) — Dharman, Dec 18 '20 at 21:43

score 2 · Answer 1 · edited May 23 '17 at 12:02

2

For closing the dialog when clicking outside check the answer here: jQuery UI - Close Dialog When Clicked Outside

For altering the background, check the themeroller http://jqueryui.com/themeroller/ and the section Overlay and Shadow Classes

edited May 23 '17 at 12:02

Community

1
1

answered Oct 14 '13 at 21:05

eyettea

1,376
2
16
35

Second question answered. For the first one, I would like to check his html in order to understand which are the corresponding names for my code – Datacrawler Oct 14 '13 at 21:34

score 2 · Accepted Answer · answered Oct 14 '13 at 21:20

Try this JS:

$("a").click(function(event) 
{
  $(this).parent().parent().children(".dialog").dialog(
  {
      width: 600,
      modal: true,
      close: function( event, ui ) {
          $(this).dialog('destroy');
      },
      open: function(event, ui) {
          $('.ui-widget-overlay')
          .bind('click', 
                function() { 
                    $(".dialog").dialog('close'); });
      }
  });
});

And this CSS:

.ui-widget-overlay {
    opacity: 0.7;
    background-color: #000000;
}

JSFiddle: http://jsfiddle.net/kBMW2/

(You will need to add your own styles, etc.)

How to close Jquery popup window when clicking of the "window area" and how to make the background dull?

2 Answers2