Question

我试图找出为什么此代码中淡入和淡出对话框的原因不正常。

我要做的就是点击一下淡入淡出。但我只是试图用CSS淡入/淡出。当我手动删除控制台中的“活动”类时效果有效，但是当我实际点击链接时（打开对话框）则不行。

这是我的代码

CSS：

.modal {
    display: block;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-image: url('pixel.png');
    opacity: 1;
}
.modal-dialog {
    max-width: 600px;
    background-color: white;
    z-index: 99;
    min-height: 200px;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.modal-dialog .active {
    opacity: 1;
    background-color: #ffffff;
    border: 1px solid #999;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

我的JS（以防万一）：

$('body').on('click', '[data-modal]', function (e) {
        e.preventDefault();
        $('body').addClass('modal-open');
        $('body').append("<div class='modal'></div>").addClass('active');
        $('.modal').append("<div class='modal-dialog'></div>")
        $('.modal-dialog').html("<div class='modal-inner generic-content'></div>").addClass('active');

Answer 1

转换需要数值才能在2个规则语句之间设置步骤。您应该使用：opacity而不是显示： http://jsfiddle.net/bJz7R/1/

$('a.click-me').click(function(){
   $('#open').css('opacity','1');
});

并替换为CSS：

display:none;

通过

opacity:0;

css转换不在对话框上工作

1 个答案: