SimpleModal not closing on default button click (but will close when clicking on sides of container)

Question

I am using this plugin: http://www.ericmmartin.com/projects/simplemodal/

I am trying to use the default button to close the pop-up window, but it will not close. I have added the simplemodule-close class to the that will close the div, but that is to no avail. I have also tried using jQuery.modal.close(); but that is not working..

I have read hundreds of other posts, but for some reason it is not working.

Note: I am working in Wordpress so $ = jQuery (for noConflict)

My HTML:

 <div id="basic-modal-content">
            <a class="modalCloseImg simplemodal-close" title="close"></a>
            <h1>Login</h1><hr />
 </div>

CSS:

#basic-modal-content {
    display:none; 
    background-color:#FFF; 
    border:4px solid #444; 
    padding:0 20px; 
    z-index: 2000;
    position: fixed;
    left:50%; margin-left:-280px; top:10%;
}
#basic-modal-content hr{display:none;}
#basic-modal-content .loginform form{width:100%;}
#basic-modal-content a.modalCloseImg{right:-13px;top:-10px;}
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
a.modalCloseImg {background:url(/files/2013/12/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

Javascript:

jQuery(function (jQuery) {
    // Load dialog on click
    jQuery('.login_nav .basic').click(function (e) {
        jQuery('#basic-modal-content').modal();

        return false;
    });
    jQuery('.modalCloseImg').on('click', function(){
        jQuery.modal.close();
    })
});

The button to make the div appear:

echo "<div class=\"login_nav\"><a href=\"/ta-login/?ta-logout=true\">Logout</a></div>"; } else { echo "<div class=\"login_nav\"><a href=\"#\" class=\"basic\">Login</a></div>"; }
                                } else { echo "<div class=\"login_nav\"><a href=\"#\" class=\"basic\">Login</a></div>"; }

Answer 1

display:inline resets height and width

An empty inline element will have no width or height, so there is nothing to click. Try this:

a.modalCloseImg {
    display: block;
}