我想弄清楚为什么此代码中的对话框淡入淡出无法正常工作。
我想做的是在点击时淡入淡出。
这是我的代码
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');
提前致谢!
最佳答案
我将向您展示如何将 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);
}
});
或者，要在点击时淡出，您可以使用它代替按键:
$("div").click(function(evt){
$(".modal").fadeOut(400);
});
在这里，当您单击“打开”对话框时，将显示淡入动画。 fadeIn(400) ... 400 表示为动画在对话框中淡入淡出的时间段。
当点击 body 并按下回车键 (KeyCode = 13) 时，它会淡出并隐藏。您也可以使用 ESC 关闭它(keycode = 27)。
这是 JSFiddle link .
我想您可以改进 CSS 以将此对话框显示为对话框。
关于jquery - 在 javascript 动画上 append html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22918961/