2015-01-30 1 views
0

전송 문제가있는 닫는 jquery 대화 상자를 열고 &을 찾고 있었는데 좋은 점이 있습니다. 로그인 버튼을 클릭하면 전송 효과가있는 대화 상자가 나타납니다. 대화 상자가 닫히면 역 전송 효과가 발생합니다. 내 역 전송 효과 코드가 작동하지 않습니다. Jquery 역방향 전송 효과가있는 대화 상자 만들기

<!DOCTYPE html> 
<html> 
<head> 
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 

<a id="fill-login-form" href="#">Login</a> 

<div id="login-form" style="display: none; width: 340px; height: 135px;"> 
    Some stuff 
</div> 

</body> 
</html> 

$(document).ready(function() { 

    // turn the div into a jQuery UI dialog and hide it 
    var dlg = $('#login-form').dialog({ 
     title: 'Just a cool dialog', 
     autoOpen: false, 
     // hook to the 'beforeclose' event instead of 'close' 
     beforeclose: function(event, ui) { 
      dlg.dialog('widget').effect('transfer', { 
       to: '#fill-login-form', 
       className: 'ui-effects-transfer' 
      }, 500, null); 
      return true; // to close it 
     } 
    }); 

    // open the dialog when the link is clicked 
    $('#fill-login-form').click(function() { 
     //Hide your dialog here 
     dlg.dialog("open").dialog("widget").css("visibility", "hidden"); 
     $(this).effect("transfer", { 
     to: dlg.dialog("widget"), 
     className: "ui-effects-transfer" 
    }, 500, function() { 
      //Open the dialog after showing your transfer effect 
     dlg.dialog("widget").css("visibility", "visible"); 
    }); 
    }); 

}); 

enter link description here

는 원하는 효과를 얻기 위해 코드를 수정하십시오. 감사합니다

답변

1

마감을 위해 to 속성은 id 문자열이 아닌 객체를 수신합니다. 따라서 #fill-login-form 대신 $("#fill-login-form")이되어야합니다.

개봉을 위해 dlg 지정을 변경해야합니다.

http://jsfiddle.net/Lss3hcgg/1/

: 여기

코드입니다