SimpleModal 在默认按钮单击时不关闭（但在单击容器侧面时会关闭）

Question

我正在使用这个插件：http://www.ericmmartin.com/projects/simplemodal/

我正在尝试使用默认按钮关闭弹出窗口，但它不会关闭。我已将 simplemodule-close 类添加到将关闭 div 的类中，但这无济于事。我也尝试过使用 jQuery.modal.close();但这不起作用..

我已经阅读了数百篇其他帖子，但由于某种原因它不起作用。

注意：我在 Wordpress 中工作，所以 $ = jQuery (for noConflict)

我的 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();
    })
});

使div出现的按钮：

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

空的内联元素没有宽度或高度，因此没有可点击的内容。试试这个：

a.modalCloseImg {
    display: block;
}