-1

1 つのリンクでいくつかのコードを作成しました。リンク #1 をクリックすると、ポップアップ ウィンドウに text/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

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

#small-dialog は表示したい div へのリンクです - div id の 1 つを変更し、リンクの 1 つを更新します

于 2013-08-12T15:06:02.467 に答える