Question

我有一个模态元素，当您单击按钮或图像时，您将获得包含内容的模态容器。

正在进行此项工作的html，css和jquery如下：

<div id="modal-1" class="modal">
    <div class="button modal-button" data-button_id="1">
        <span>Click me!</span>
    </div> 
    <div class="modal-content-wrapper" id="modal_wrapper_1">
        <div class="modal-content" id="modal_content_1" style="top: 347.5px;">
            <p>sd.,fknasdč-,fnasdlkfn-lkasfnl-aksd-lasd fasd lkasd jlas<br>sđadf<br>asdkmflčkasdčklasdjasd<br>flasčkf člwas nfklčasd jfćčasdf
            </p>
            <div class="modal-close">X</div>
        </div>
    </div>
</div>
<div id="modal-2" class="modal">
    <div class="modal-button" data-button_id="2">
        <img src="http://www.clker.com/cliparts/e/q/J/1/Z/A/new-play-button-2-md.png">
    </div>
    <div class="modal-content-wrapper" id="modal_wrapper_2">
        <div class="modal-content" id="modal_content_2" style="top: 347.5px;">
            <p>sd.,fknasdč-,fnasdlkfn-lkasfnl-aksd-lasd fasd lkasd jlas<br>sđadf<br>asdkmflčkasdčklasdjasdflasčkf člwas nfklčasd jfćčasdf</p>
            <div class="modal-close">X</div>
        </div>
    </div>
</div>

CSS：

.modal{
    display: block;
    margin-bottom: 50px;
}

.modal .modal-button{
    cursor: pointer;
    display: inline-block;
}

.button{
    background: #ccc;
    padding: 10px 15px;
}

.modal-content-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(34, 34, 34);
    background: rgba(34, 34, 34, 0.85);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.modal-content-wrapper.opened{
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.modal-content-wrapper .modal-content{
    position: fixed;
    width: 50%;
    left: 25%;
    background: #fff;
    padding: 20px;
    text-align: left;
}

.modal-content-wrapper .modal-content .modal-close{
    width: 52px;
    height: 52px;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: -60px;
    cursor: pointer;
    background: #222;
    text-align: center;
    color: #fff;
}

JS：

var $modal_content_wrapper = $('.modal-content-wrapper');
var $modal_content = $('.modal-content');
var $modal = $('.modal');
var $modal_button = $('.modal-button');
var $modal_button_close = $('.modal-close');

$modal_content.each(function(){
    $(this).css('top', ($(window).height()-$(this).outerHeight(true))/2);
});

$modal.on('click', $modal_button, function(e){
    e.preventDefault();
    var id = $(this).find($modal_button).data('button_id');
    if($('#modal_wrapper_'+id, '.modal').length == 1){
        $('#modal_wrapper_'+id).detach().appendTo('body').addClass('opened');
    } else{
        $('#modal_wrapper_'+id).addClass('opened');
    }
});

($modal_button_close, $modal_content_wrapper).on('click', function(e){
    e.preventDefault();
    $modal_content_wrapper.removeClass('opened');
});

$(document).keyup(function(e){
    if(e.keyCode === 27){
        $modal_content_wrapper.removeClass('opened');
    }
});

小提琴链接：http://jsfiddle.net/smfzsnyu/

困扰我的是，当我第一次点击按钮时，显示模态窗口的动画是即时的。没有任何转变。当我关闭它，然后再次打开时，转换很顺利。

是不是因为我正在拆卸窗户并将其贴在身上？有没有解决的办法？当我第一次点击它时，我想要很好的动画。有办法吗？

编辑：找到解决方案

我推迟了课程的添加，这似乎就是这样做的

$('#modal_wrapper_'+id).detach().appendTo('body').delay(200).queue(function(){
    $(this).addClass('opened');
});

Answer 1

只需改变一下：

        if($('#modal_wrapper_'+id, '.modal').length == 1){
            $('#modal_wrapper_'+id).detach().appendTo('body').addClass('opened');
        } else{
            $('#modal_wrapper_'+id).addClass('opened');
        }

有了这个：

        if($('#modal_wrapper_'+id, '.modal').length == 1){
            $('#modal_wrapper_'+id).addClass('opened');
        } else{
            $('#modal_wrapper_'+id).addClass('opened');
        }

你有你想要的东西;）

第一次点击时的模态窗口动画是即时的

1 个答案: