Question

我目前正在处理的网站有一个pop out div，上面有一个位置图，我的问题是一旦pop up div关闭了我就必须刷新页面再次打开div 它正在运行jquery - 这是代码

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
                $(document).ready(function(){

                    $('#view_map_of_stocklists_link').click(function() {

                        //$('#popupdiv').show('slow');
                        $("#popupdiv").css('visibility', 'visible');
                        $("#mappy").css('opacity', '1');



                    });

                    $('.closepopup').click(function() {

                        $('#popupdiv').hide('slow');

                    });


                });
            </script>

造型

<style>
                #popupdiv 
                    {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        background-color: white;
                        z-index: 100;
                        height: 600px;
                        margin-top: -200px;
                        width: 960px;
                        margin-left: -500px;
                        padding: 20px;
                    }

                    #view_map_of_stocklists_link:hover {
                        cursor:pointer;
                    }

                    .closepopup {
                        margin-top: 60px;
                        border: 1px solid #ccc;
                        background-color: #000;
                        color: white;
                        cursor: pointer;
                    }

            </style>

然后是HTML本身

<div id="popupdiv" style="visibility:hidden;">
                            <center>
                                <iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
                                <div class="closepopup" style="width:200px">Close</div>
                            </center>
                        </div>

                        <h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
                        <h5 class="skin-font-color1 p-wrapper"><!-- client txt -->  <div id="view_map_of_stocklists_link" class="skin-font-color4">
                          <h4>View map of   stockists</h4>
                    </div>

网站为http://www.tee-ze.co.uk/sosmoothies/

干杯

Answer 1

您将“可见性”设置为“可见”而不是“显示”为“阻止”。当调用jQuery .hide（）时，它最终会保存以前的显示值并将其设置为display:none;所以你应该做的事情如下：

$('#view_map_of_stocklists_link').click(function() {
  $('#popupdiv').hide('slow');
});

我刚才意识到你已经在你的代码中注释掉了。我希望我可以发表评论，但我需要更多的代表。

修改很抱歉在之前的回答中抱怨。

我只是尝试取消注释现有代码并删除可见内容，这在您的网站中运行良好。试试吧。

Answer 2

您显示弹出式地图的方式与您隐藏它的方式不符。

你用以下方式显示：

$("#popupdiv").css('visibility', 'visible');

但你隐藏它：

$('#popupdiv').hide('slow');

将其淡出但最终在display: none元素上设置CSS样式#popupdiv。

当您尝试再次显示时，它仍然有display: none。设置visibility不会影响display样式。

你需要让隐藏和显示匹配。使用visibility样式或display样式，但使用相同的样式进行隐藏和显示（jQuery的.show()方法使用display）。

例如，您可以使用<div>而不是display: none创建visibility: hidden，然后您可以始终使用jQuery的.show()和.hide()。

一旦关闭，无需刷新页面即可打开地图

2 个答案: