Карта не открывается без обновления страницы после закрытия

Question

Веб-сайт, на котором я сейчас работаю, имеет выпадающий 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/

Приветствия

Answer 1

Путь вы показываете всплывающую карта не соответствует, как ты прятался его.

Вы показываете его:

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

Но ты прячешь его:

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

Это замирает его, но в конечном счете, задающего стиль CSS display: none на #popupdiv элемента.

Когда вы попытаетесь показать его снова, на нем все еще есть display: none. Установка visibility не влияет на стиль display.

Вам нужно, чтобы скрыть и показать матч. Либо используйте стиль visibility, либо стиль display, но используйте тот же самый для скрытия и отображения (а метод .show() jQuery использует display).

Например, вы можете создать <div> с display: none вместо visibility: hidden, а затем вы можете использовать JQuery-х .show() и .hide() последовательно.

Answer 2

Вы устанавливаете 'видимость' на 'visible' вместо 'display' на 'block'. Когда JQuery .hide() называется это в конечном счете сохраняет предыдущее значение дисплея и устанавливает его в display:none; Так что вы должны делать что-то вроде:

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

который я только что понял, ты уже комментировал в своем коде. Хотел бы я оставить комментарий, но мне нужно больше репутации.

Редактировать: Извините, что пожаловался в мае.

Я только что попробовал раскомментировать существующий код и удалить видимые вещи, и это прекрасно работает на вашем сайте. Попробуй.