Question

这让我疯了。

我有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有些不确定。但是，我无法理解我的生活。

想法？

Answer 1

原来我从未包含.fade样式;感谢PSCoder制作这个小提琴，因为它包括完整的bootstrap 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;
}

Bootstrap Modal不工作（内置回调未触发）

1 个答案: