在正文单击时关闭简单的 jQuery 弹出窗口

Posted 2023-02-23

【中文标题】在正文单击时关闭简单的 jQuery 弹出窗口

【英文标题】：Close simple jQuery popup on body click

【发布时间】：2016-02-18 04:04:59

【问题描述】：

我有一个简单的 jQuery 弹出窗口，它获取您的 ip，然后根据您的位置显示某些信息。地理位置。我正在努力做到这一点，所以当你点击身体上的任何地方时，它会关闭弹出窗口。由于某种原因，这不起作用。

<div style="display:none;">
  <div id="message" style="padding:30px;">
    <h1>Hola!</h1>
    <p>You are in US</p>
  </div>  
</div>



jQuery.ajax(  
  url: '//freegeoip.net/json/', 
  type: 'POST', 
  dataType: 'jsonp',
  success: function(location) 
    jQuery('#city').html(location.city);
    jQuery('#region-code').html(location.region_code);
    jQuery('#region-name').html(location.region_name);
    jQuery('#areacode').html(location.areacode);
    jQuery('#ip').html(location.ip);
    jQuery('#zipcode').html(location.zipcode);
    jQuery('#longitude').html(location.longitude);
    jQuery('#latitude').html(location.latitude);
    jQuery('#country-name').html(location.country_name);
    jQuery('#country-code').html(location.country_code);
  
 );

jQuery.ajax(  
  url: '//freegeoip.net/json/', 
  type: 'POST', 
  dataType: 'jsonp',
  success: function(location) 

    if (location.country_code === 'US') 

      $('#message').parent().show();
    
  
 );

jQuery('html') //set for html for jsfiddle, but should be 'body'
              .bind(
               'click',
               function(e)
            if(
             jQuery('#message').dialog('isOpen')
             && !jQuery(e.target).is('.ui-dialog, a')
             && !jQuery(e.target).closest('.ui-dialog').length
            )
             jQuery('#message').dialog('close');
            
               
              );

【参考方案1】：

当您实例化 jquery UI 对话框时，您需要将 close 方法绑定到您想要触发关闭对话框的节点。

  // instantiate the dialog
  $(function() 
    $("#dialog").dialog(
      open: function() 

        // if condition is met then bind click to the body and close the dialog  

            jQuery('body').bind('click', function() 
              jQuery('#dialog').dialog('close');
            )

       // end if

      
    );
  );

  jQuery.ajax(
    url: '//freegeoip.net/json/',
    type: 'POST',
    dataType: 'jsonp',
    success: function(location) 
      jQuery('#city').html(location.city);
      jQuery('#region-code').html(location.region_code);
      jQuery('#region-name').html(location.region_name);
      jQuery('#areacode').html(location.areacode);
      jQuery('#ip').html(location.ip);
      jQuery('#zipcode').html(location.zipcode);
      jQuery('#longitude').html(location.longitude);
      jQuery('#latitude').html(location.latitude);
      jQuery('#country-name').html(location.country_name);
      jQuery('#country-code').html(location.country_code);
    
  );

  jQuery.ajax(
    url: '//freegeoip.net/json/',
    type: 'POST',
    dataType: 'jsonp',
    success: function(location) 

      if (location.country_code === 'US') 

        $('#message').parent().show();
      
    
  );

<div id="dialog">
  <div id="message" style="padding:30px;">
    <h1>Hola!</h1>
    <p>You are in US</p>
  </div>  
</div>

【讨论】：

嗨@JeffRodger 当我为你编写代码时它在codepen中工作。除了不工作之外，您还有其他事情要做吗？你的控制台说什么？

这里是随附的 codepen，与您的代码完全相同：codepen.io/anon/pen/rxgOEW 在文本之外单击，没有任何内容消失。

@JeffRodger 您的代码笔没有添加 jquery 和 jquery UI，您希望它如何工作？我已经为你更新了这个，请查看工作代码笔：codepen.io/anon/pen/ZQNoga尝试点击蓝色区域中的任意位置。