Question

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

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

我已经阅读了数百篇其他帖子，但由于某些原因它无效。

注意：我在Wordpress中工作，所以$ = jQuery（对于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;
}

SimpleModal未在默认按钮单击时关闭（但在单击容器的两侧时将关闭）

1 个答案: