0

这让我发疯。

我有 2 个模态窗口：

<form action="#" method="post" id="newsletter" class="modal fade">
    <div class="modal-body span8">
        <h3>Signup for our newsletter<span class="close" data-dismiss="modal">&times;</span></h3>
        <label>
            <span>First Name</span>
            <div><input type="text" name="fname"></div>
        </label>
        <label>
            <span>Last Name</span>
            <div><input type="text" name="lname"></div>
        </label>
        <label>
            <span>Email Address</span>
            <div><input type="text" name="email"></div>
        </label>
        <button type="submit">Submit</button>
    </div>
</form>
<form action="/search/" method="get" id="search" class="modal fade">
    <div class="modal-body span12">
        <label>Search: <input type="text" name="q"></label>
        <button type="submit">Search</button>
    </div>
</form>

以及触发每个模式的链接：

<a href="#newsletter"><i class="icon-newsletter"></i> Get notified</a>
<a href="#search"><i class="icon-search"></i> Search Website</a>

具有以下相关样式：

.modal-backdrop {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1040;
    background-color:#FFF;
}
    .modal-backdrop.fade {
        opacity:0;
    }
    .modal-backdrop, .modal-backdrop.fade.in {
        display:block;
        opacity:.9;
        filter:alpha(opacity=90);
    }

.modal {
    position:fixed;
    top:10%;
    left:0;
    z-index:1050;
    width:100%;
}
    .modal.fade {
        -webkit-transition: opacity .3s linear, top .3s ease-out;
        -moz-transition: opacity .3s linear, top .3s ease-out;
        -ms-transition: opacity .3s linear, top .3s ease-out;
        transition: opacity .3s linear, top .3s ease-out;
        top:-100%;
    }
    .modal.fade.in {
        top:10%;
    }
    .modal-body{
        margin: 0 auto;
        float: none;
        background: #FFF;
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
    }

还有一些用于触发模态的自定义 JS（如果是模态，所有 # 链接将滚动到或以其他方式打开目标）：

$('body').on('click', 'a[href^="#"]', function(e){
    e.preventDefault();
    var target = $(this).attr('href');
    var top = 0;

    if($(target).hasClass('modal')){
        $(target).modal('toggle');

        if($(window).width() < 960)
            $('html, body').animate({scrollTop:0});
        return;
    }

    if($(target).length > 0){
        top = $(target).offset().top - 65;
    }

    $('html,body').animate({scrollTop:top},500);
});

单击时，显示背景，但不显示模态本身；显示添加“in”类的内置回调没有触发。我已经对其进行了足够多的调试以弄清楚这一点，但是这个（基本上）确切的代码在另一个站点上工作得非常好，这表明我的 HTML/CSS/JS 有问题。但是，我无法为我的生活弄清楚。

想法？

4

1 回答 1

0

原来我从来没有包含 .fade 样式；感谢 PSCoder 制作了那个小提琴，因为它包括完整的引导 css。

.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

.fade.in {
    opacity: 1;
}
于 2013-05-01T14:53:04.170 回答