-1

我用一个链接创建了一些代码。当我单击链接 #1 时，会弹出一个窗口，其中包含一些文本/html。您可以在此处查看示例：http: //johnnylai.me/popup

当我单击带有不同文本/html 的链接 #2 时，如何确保获得另一个弹出窗口？等等链接#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>
4

2 回答 2

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>
于 2013-08-12T15:04:08.410 回答
0 
 <a class="popup-with-zoom-anim" href="#small-dialog">

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

于 2013-08-12T15:06:02.467 回答