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');
});

コードでコメントアウトしていることに気付きました。コメントを残せたらいいのですが、もっと担当者が必要です。

編集： 5月の以前の回答で不平を言って申し訳ありません。

既存のコードのコメントを外して、visibilty のものを削除しようとしたところ、サイトで問題なく動作しました。それを試してみてください。

于 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>withを作成すると、jQuery のand を一貫して使用できます。display: nonevisibility: hidden.show().hide()

于 2013-09-13T22:44:47.917 に答える