자바 스크립트 애니메이션에 html 추가

이 코드의 대화 상자에서 페이드 인 및 페이드 아웃이 제대로 작동하지 않는 이유를 알아 내려고하고 있습니다.자바 스크립트 애니메이션에 html 추가

내가하려는 것은 클릭 할 때 페이드 인 및 페이드 아웃하는 것입니다.

.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');

가 사전에 너무 감사

이 내 코드

CSS입니다!

출처

2014-04-07 user3507631

fadeOut() 및 fadeIn()을 대화 상자에 추가하는 방법을 보여 드리겠습니다.하지만 시간이 없으므로 대화 상자의 스타일을 수정하지 않았습니다. 죄송합니다. ...하지만 너 혼자 고칠 수 있으면 좋겠다.

HTML

<body> 
    <input type="button" id="open" value="Open"/> 
</body>

$('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 애니메이션으로 표시됩니다. fadeIn (400) ... 400은 대화 상자에서 페이드 아웃하기 위해 애니메이션에 주어진 기간을 의미합니다 .....

그리고 시체를 클릭하고 Enter 키 (KeyCode = 13)를 누르면 사라질 것입니다 밖으로 숨어. 당신은 또한 여기

내가 당신을 대화로이 대화 상자를 표시하는 당신의 CSS를 향상시킬 수 있음을 추측 JSFiddle 링크

입니다 .... 그것은 (키 코드 = 27)를 닫으려면 ESC를 사용할 수 있습니다 ....

나는

.... 난 당신이 질문 .... 날 버즈 날 투표를하는 경우이 .... 당신을 도움이되기를 바랍니다 ....이 유 알고 싶어 것입니다 희망

즐기십시오!

출처

2014-04-07 18:27:31

자바 스크립트 애니메이션에 html 추가

답변

관련 문제