2014-12-22 6 views
-1

Я использую простой модальный, чтобы создать всплывающее окно, я пытаюсь добавить кнопку, которая закроет всплывающее окно, но ничего не произошло, когда я нажму.Закрыть popup simple modal

  1. библиотеку JS модели образца прилагается

ниже JQuery код

jQuery('a.postpopup').click(function(){ 
     id = jQuery(this).attr('rel'); 
url='http://localhost/website/?page_id=81'; 
     jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load(url+'&id='+id).modal(); 
     return false; 
    }); 
//btn to close the popup 
jQuery('#btnclose').click(function(){ 
alert('hello'); // close code should be placed here but alert didn't executed. 
    }); 

ниже код в моей странице шаблона (всплывающее окно)

<?php 
/* 
Template Name: my template 
*/ 
?> 
<?php 
    $post = get_post($_GET['id']); 
?> 
<?php if ($post) : ?> 
    <?php setup_postdata($post); ?> 
    <div class="whatever"> 
    <div id="popheader"> 
     <img id="popimg" src="http://localhost/website/wp-content/uploads/2014/12/logo1.png" width="200" height="auto"/> 
     <font id="popup-title" class="entry-title" > <?php the_title()?> </font> 
     <input type="button" id="btnclose" /> //btn to close the pop 
    </div> 
     <table class="tblcontent"> 
     <tr> 
      <td id="popup-content"> 
       <?php the_content(); ?> 
      </td> 
     </tr> 
     </table>   
    </div> 
<?php endif; ?> 

Итак, как i закрыть это всплывающее окно

+0

Является ли этот элемент добавляется в DOM после попытки связать это событие щелчка (динамический?)? Если вы ищете сотни тысяч повторяющихся вопросов ... Если нет, укажите соответствующий образец для репликации вашей проблемы. –

ответ

0

Потому что #btnclose еще не существует. При загрузке содержимого ajax вы должны связывать события только после загрузки содержимого.

jQuery('a.postpopup').click(function(){ 
    id = jQuery(this).attr('rel'); 
    url='http://localhost/website/?page_id=81'; 
    jQuery('<div id="ajax-popup"></div>') 
     .hide() 
     .appendTo('body') 
     .load(url+'&id='+id, function(data){ 
      jQuery(data).find('#btnclose').click(function(e){ 
       alert("Button clicked"); 
      }); 
     }) 
     .modal(); 

    return false; 
}); 

Или изменить шаблон и прикрепить функцию к нажатию кнопки:

<input type="button" id="btnclose" onclick="doSomething()" /> //btn to close the pop 

function doSomenthing() { 
    alert("Button Clicked"); 
} 
+0

. Большое вам спасибо, но я стараюсь сделать первое решение методом .find, но ничего не произошло, и в клиенте не появилась ошибка. браузер, у вас есть идея? ........ второй способ изменение шаблон работает хорошо. – Bassem

+0

или вы можете пойти со своим inital решением и изменить js на jQuery ('# btnclose'). On ('click', function() { // alert }); Метод «on» прослушивает вновь созданные элементы –

+0

@antoineguillien, Хорошо, спасибо. – Bassem