Question

我目前正在开发一个jQuery对话框，但我遇到了问题。这是我的JavaScript代码：

$(function() {
    $('.overlay-trigger').click(function()
    {
        $('#expose-mask').fadeIn(function()
        {
            $('.overlay-box').css({'display':'block'});
        });
    });
    $('.overlay-box-closer, #expose-mask').click(function()
    {
        $('.overlay-box, #expose-mask').css({'display':'none'});
    });
});

我的HTML代码：

<div id="footer">
    <div class="wrapper">
        <ul>
            <li>
                <a id="help" class="overlay-trigger" href="help.php">Help</a>
            </li>
        </ul>
        <span id="footer-copyright">
            <a href="./..">Coded by Dylan.</a>
        </span>
    </div>
</div>
<div class="overlay-box">
    <div class="overlay-box-container">
        <span class="overlay-box-closer" title="Close the overlay"></span>
        <h1 class="big-title">Help</h1>
        <p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
    </div>
</div>
<div id="expose-mask" style="display: none;"></div>

和我的CSS代码：

.overlay-box
{
    background-color: #FFFFFF;
    display: none;
    position: fixed;
    top: 40%;
    right: 0;
    left: 0;
    z-index: 3;
    width: 50%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
}

.overlay-box-container
{
    margin: 20px;
}

#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

正如您所看到的，在我的链接<a id="help" class="overlay-trigger" href="help.php">Help</a>中，我的href和我的班级overlay-trigger执行了叠加层的打开。如果我将＃放在我的href中，那么叠加层就会打开：http://prntscr.com/686n07

我想在我的＆＃34;帮助＆＃34;中添加一个链接。文本，但是当我点击链接时，叠加层没有打开，我直接重定向到链接。即使有链接，我也会喜欢，无论如何都会打开叠加层。如下例所示：http://community.invisionpower.com/register/（点击＆＃34;隐私政策＆＃34;文字）。

感谢。

Answer 1

使用event.preventDefault()防止默认行为：

$('.overlay-trigger').click(function(event){
    event.preventDefault(); 
    $('#expose-mask').fadeIn(function(){
        $('.overlay-box').css({'display':'block'});
    });
});

即使我有链接，如何强制打开我的jQuery Dialog？

1 个答案: