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 .

1. 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

Answer 1

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