Close popup simple modal

Question

I am using simple modal to create a popup , i try to add button that will close the popup but nothing happened when i click it .

js library of sample model attached

below is jQuery Code

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

below is code in my template page (popup)

<?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; ?>

So , how can i close this pop up

Is this element (dynamic?) added to the DOM after you try to bind this click event? If ya search for the hundred of thousand duplicate questions... If no, provide relevant sample to replicate your issue — A. Wolff, Dec 22 '14 at 14:50

score 0 · Accepted Answer · answered Dec 22 '14 at 14:56

Because #btnclose does not exists yet. When loading ajax content you should bind events, only after content was loaded.

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

Or modify your template and attach function to button click:

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

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

,Thank you so much but i try to do the first solution by .find method but nothing happened and no error appeared in client browser , do u have any idea ?? ........second way by modifying template works fine. — Bassem, Dec 22 '14 at 15:07
or you could go with your inital solution and change your js to jQuery('#btnclose').on('click',function(){ //alert }); The "on" method listen to newly created elements — Sladix, Dec 22 '14 at 16:01

Close popup simple modal

1 Answers1