简单弹出关闭答案

【问题标题】：Simple Popup Close简单弹出关闭
【发布时间】：2016-02-17 02:56:28
【问题描述】：

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

【问题讨论】：

标签： jquery popup

【解决方案1】：

你是 .show()ing 父母 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>

【讨论】：

类似：$("#message").parent().hide(); ?但是，这将只是重新循环并再次显示消息，不是吗？在重新访问之前如何隐藏它？
用 sn-p 更新了我的答案，没有理由隐藏父母应该从您提供的代码中重新运行 ajax 请求。
是的，我知道您在点击时打开，在点击时关闭。但是我的弹出窗口通过地理定位功能打开，然后如何通过单击关闭？用 HTML 更新
我明白了，我不明白你为什么有一个父 div？您可以简单地删除它并将display:none 样式应用于#message div。您也可以像我一样从 ajax 请求中取出 $('.close') 函数。更新了我的答案，使其更加相似。
是的，抱歉，这无助于解决问题。我需要在功能（位置）上打开弹出窗口，而不是在点击时打开。但然后点击关闭。您在点击时打开，然后在点击时关闭。不幸的是完全不同。