1

我目前正在处理的网站有一个弹出 div，上面有位置地图，我的问题是一旦弹出 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/

干杯

4

2 回答 2

2

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

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

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

编辑： 很抱歉在之前的回答中抱怨。

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

于 2013-09-13T22:46:49.753 回答
1

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

你用以下方式展示它：

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

但是你隐藏它：

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

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

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

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

例如，您可以创建<div>withdisplay: none而不是visibility: hidden，然后您可以使用 jQuery 的.show()and.hide()一致的。

于 2013-09-13T22:44:47.917 回答