1 . https://github.com/dimsemenov/Magnific-Popup
3
4 http://jquery.com/download/
<!DOCTYPE html>
<html>
<head>
<title>Welcome to China</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
function popupModalDialog(){
popup($('#DivID'));
}
function closeModalDialog(){
$.magnificPopup.close();
}
function popup(pTarget)
{
$.magnificPopup.close();
$(window).scrollTop(0);
setTimeout(function()
{
$.magnificPopup.open({
showCloseBtn: false,
closeOnBgClick: false,
mainClass: 'my-mfp-zoom-in',
removalDelay: 300,
items: {
src: pTarget,
type: "inline"
},
callbacks: {
open: function(){
$(pTarget).show();
$(window).on('resize.pop', function(){
$('.wrapper').css({'height':'auto'});
$('.wrapper').css({'height':window.innerHeight, 'overflow':'hidden'});
});
$(window).trigger('resize.pop');
},
close: function(){
$(pTarget).hide();
$('.wrapper').css({'height':'auto', 'overflow':'visible'});
$(window).off('resize.pop');
}
}
})
}, 200);
}
</script>
</head>
<body>
<button id="btnOpen" title='點(diǎn)擊這個(gè)按鈕：以彈出模式窗口的形式，彈出Div層' type="button" onclick="popupModalDialog()" >彈出</button>
<div id="DivID" style='position:relative;border:0px solid red;width:300px;height:320px;margin: 0 auto;background-color:white;display:none;'>
<img style='max-width:100%;max-height:100%;' src='Hydrangeas.jpg'></img>
<button id="btnClose" title='點(diǎn)擊這個(gè)按鈕可以關(guān)閉彈出層' type="button" onclick="closeModalDialog()" >關(guān)閉</button>
</div>
<script src="jquery.magnific-popup.min.js"></script>
</body>
</html>
