0

ここにポップアップ ボックスがあり、2 つのものを作りたいと思います。まず、ポップアップウィンドウが表示されているときに、「ポップアップウィンドウの外側の領域」を少し暗く表示したいと思います。次に、その領域をクリックするとポップアップ ウィンドウが閉じます。これが私のスクリプトです：

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

と私のhtmlコード：

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

jqueryでこの2つのことを行う特定の機能はありますか?

4

2 に答える 2

2

この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'); });
      }
  });
});

そしてこのCSS：

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

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

(独自のスタイルなどを追加する必要があります)。

于 2013-10-14T21:20:20.083 に答える