Question

如何使用关闭按钮终止此弹出窗口？还是某种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.region_name === 'Utah') {

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

    }
    else{
      $(".close").click(function(){
      $("#message").hide();
      });
    }
  }
} );

它不起作用。通过使用.hide（）;我假设它会自动隐藏div？

以下是用于显示此弹出窗口的HTML。弹出窗口正在使用地理定位来检测位置和弹出窗口，我需要它然后通过点击关闭。

<!doctype html>

<html lang="en">
<head>

<title>This is a popup</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
    body
    {
        background: url(1.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    #message
    {
        width:516px;
        height:508px;
        margin:0 auto;
        background-image: url(test.jpg);
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-250px;
        margin-top:-250px;
        transition: 0.5s;
    }
</style>
</head>

<body>

<div style="display:none;">
  <div id="message">
    <a class="close" href="/">Cancel</a>
  </div>  
</div>

  <script src="js/scripts.js"></script>
</body>
</html>

Answer 1

您.show()是父div

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

然后隐藏直接div

$('#message').hide();

它应该仍然隐藏$('#message') div，但显然这不是理想的结果。

实施例

$('.open').on('click', function(){
  $('.msg').show();
})


$('.msg .close').on('click', function(){
  $('.msg').hide();
})

$.ajax( "http://example.com/some/fake/page" )
  .done(function() {
    
  })
  .fail(function() {
    
    // the ajax request fails, but this could be placed in the `.done()` handler above.
    $('.msg').show();
  
  })

.bg {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: rgb(255,230,230);
  margin: 0px;
  padding: 10px;
}
.msg {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: rgb(230,255,230);
  margin: 0px;
  padding: 10px;
}

.msg .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.pointer {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <span class="open pointer">open</span>
  <div class="msg" style="display:none">
    <span class="close pointer">close</span>
    <h2>Message</h2>
  </div>
</div>

简单的弹出关闭

1 个答案:

实施例