Question

我用一个链接创建了一些代码。当我点击链接＃1时，弹出的窗口中会出现一些text / html。您可以在此处查看示例：http://johnnylai.me/popup

当我点击链接＃2并且其中包含不同的文字/ html时，如何确保获得另一个弹出窗口？链接＃3和＃4等等？

HTML & jQuery code:
<code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Popup Examples</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet">   
<link href="dist/magnific-popup.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<a class="popup-with-zoom-anim" href="#small-dialog">#1 - fade-zoom animation</a><br>
<br>
<a class="popup-with-zoom-anim1" href="#small-dialog">#2 - fade-zoom animation</a><br>

<div id="small-dialog" class="mfp-hide">
<h1>Dialog example1</h1>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to   demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>

<div id="small-dialog" class="mfp-hide">
<h1>Dialog example2</h1>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>

<script>
 $(document).ready(function() {
    $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});
</script>

</body>
</html>

</code>

Answer 1

摆脱第二个链接中的1。保持班级名称相同。更改秒的href ID以匹配您要定位的ID of the div。

更新：jsFiddle

<a class="popup-with-zoom-anim" href="#small-dialog">#1 - fade-zoom animation</a><br><br>
<a class="popup-with-zoom-anim" href="#small-dialog2">#2 - fade-zoom animation</a><br>

<div id="small-dialog2" class="mfp-hide">
<h1>Dialog example2</h1>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate   the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>

Answer 2

 <a class="popup-with-zoom-anim" href="#small-dialog">

＃small-dialog是要显示的div的链接 - 更改其中一个div id并更新其中一个链接

如何从第二个链接打开另一个窗口？

2 个答案: