在javascript动画中追加html
在javascript动画中追加html
提问于 2014-04-08 01:17:59
我试图弄清楚为什么这段代码中对话框的淡入淡出不能正常工作。
我想要做的是在点击时淡入淡出。
这是我的代码
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('/assets/images/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');提前谢谢你！
回答 1
Stack Overflow用户
发布于 2014-04-08 02:27:32
我将向您展示如何将fadeOut()和fadeIn()添加到您的对话框中，但我没有修复您的对话框的样式，因为我没有时间，但我希望您能自己修复它。
HTML：
<body>
<input type="button" id="open" value="Open"/>
</body>JS：
$('body').addClass('modal-open');
$('body').append("<div class='modal' style='display:none'></div>").addClass('active');
$('.modal').append("<div class='modal-dialog'></div>")
$('.modal-dialog').html("<div class='modal-inner generic-content'>/div>").addClass('active');
$('#open').on('click', function(e){
$(".modal").fadeIn(400);
$(this).focusout();
$("body").focusin();
});
$("body").keydown(function(evt){
if(evt.keyCode == 13)
{
$(".modal").fadeOut(400);
}
});或者，要在单击时淡出，您可以在key down的位置使用此命令：
$("div").click(function(evt){
$(".modal").fadeOut(400);
});在这里，当你点击“打开”对话框将显示在fadeIn动画。fadeIn( 400 ) ... 400表示指定动画在对话框中淡入淡出的时间段。
当单击body并按enter键(KeyCode = 13)时，它将淡出并隐藏。您也可以使用ESC来关闭它(keycode= 27)。
这是JSFiddle link。
我想你可以改进你的CSS，将这个对话框显示为一个对话框。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22918961
复制相关文章
相似问题
腾讯云开发者
