1
나는 팝업 사이의 네비게이션을 만들었습니다 JS FiddleMagnificent Popup에서 닫기 단추 동작을 수정하는 방법?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="magnific-popup-0.9.9/magnific-popup.css" type="text/css" />
<style type="text/css">
.popup {
position: relative;
background-color:rgba(255,255,255,1);
padding: 20px;
width: auto;
border: 1px solid #cccccc;
max-width: 500px;
margin: auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="magnific-popup-0.9.9/magnific-popup.min.js" type="text/javascript"></script>
<script type="text/javascript">
var html = {
'a': '<div class="popup"><h1>Page a</h1><p><button id="page-a-button">Go to Page b</button></p></div>',
'b': '<div class="popup"><h1>Page b</h1></div>'
};
function thePopup(params) {
if (!params.page) {
$.magnificPopup.instance.close();
return;
}
$.magnificPopup.open({
items: { src: html[params.page], type: 'inline' },
callbacks: {
open: function() {
$('#page-a-button').click(function() {
params.page = 'b';
thePopup(params);
});
},
afterClose: function() {
params.page = {
'a': null,
'b': 'a'
}[params.page];
thePopup(params);
}
}
});
}
</script>
</head>
<body>
<button id="the-button">Click me</button>
<script type="text/javascript">
$('#the-button').click(function() {
var params = {
page: 'a'
};
thePopup(params);
});
</script>
</body>
</html>
내가 가진 문제는 실제 응용 프로그램은 도착 시간이 걸릴 아약스 통화에서 팝업 내용을 얻을 수 있다는 것입니다. 그런 다음 사용자가 닫기 을 클릭하면 팝업 닫힘과 열림이 성가 시게됩니다. JS Fiddle 예에서 소스가 인라인이기 때문에 발생하지 않는 예제입니다.
닫기 트리거의 닫는 동작을 변경하여 팝업을 닫지 않도록하고 프로그래밍 방식으로 처리하도록 할 수 있습니까?