2015-01-30 8 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/

 Смежные вопросы

  • Нет связанных вопросов^_^