Question

这是我打开和关闭对话框的脚本：

<script>
function open_dialog() {
    el = document.getElementById("dialog");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

这是我对话框内容的html代码：

<div id="dialog">
    <p>Dialog content</p>
</div>

这是我的css代码：

#dialog {
    visibility: hidden;
    width: 560px;
    position: fixed;
    top: 30%;
    left: 50%;
    margin-left: -280px;
    height: 300px;
    z-index: 999;
}

那么，我如何将转换添加到我的对话框？

Answer 1

使用此opacity

#openDialog {
       opacity:0;
    -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
-o-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
 width: 560px;
position: fixed;
top: 30%;
left: 50%;
margin-left: -280px;
height: 300px;
z-index: 999;
}
  <span id="dialog">open</span>
    <div id="openDialog">
        <p id='dialog'>Dialog content</p>
    </div>

    jQuery('#dialog').click(function(){
    $('#openDialog').css('opacity','1');
    });

DEMO

Answer 2

我建议在元素上设置一个类，而不是用JavaScript改变它的css属性。

#dialog {
    /* visibility: hidden; Remove this */
    .......

    opacity: 0;
    -webkit-transition: 1000ms;
}

#dialog.show {
    opacity: 1;
}

不要忘记transition属性的其余浏览器前缀。看到这个小提琴：http://jsfiddle.net/0wg0mz80/

我如何将css过渡添加到我的Jquery对话框？

2 个答案: