Question

我有一个简单的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');
            }
               }
              );

Answer 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>

单击身体上关闭简单的jQuery弹出窗口

1 个答案: