[英]How do I get Magnific popup to work with animate.css?
我有一個使用宏偉的彈出式插件的彈出式窗口(請參閱http://dimsemenov.com/plugins/magnific-popup/documentation.html )。 彈出窗口可以正常工作,但是當我添加animate.css(請參見https://github.com/daneden/animate.css )時,就像我在某些示例中看到的那樣,兩者是兼容的,對我來說不起作用。 這是我的代碼:
<form class="dnt-tool" name="dnt" id="dnt">
<div class="dnt-overlay">
<input type="radio" name="gender" id="male"><label for="male">Male</label>
<input type="radio" name="gender" id="female"><label for="female">Female</label>
<input type="radio" name="gender" id="all" checked><label for="all">All</label>
<select>
<option>Select a Category</option>
<option>Catgeory 1</option>
<option>Catgeory 2</option>
<option>Category 3</option>
</select>
</div><!-- end of dnt-overlay -->
<div class="dnt-btn">
<button type="submit" id="submit">Show Names</button>
</div><!-- end of dnt btn -->
</form><!-- end of dnt-tool -->
</div><!-- end of dnt-container-mobile -->
<div class="white-popup mfp-hide male-dog" id="male-modal">
<div class="popup-logo">
<a class="logo teal"></a>
</div><!-- end of logo -->
<h1>Most Popular Male <br> Dog Names</h1>
<img src="/img/dnt/male-puppy.png" alt="Male puppy">
<div class="results-list">
<ul>
<li>Abby</li>
<li>Apollo</li>
<li>Bailey</li>
<li>Bandit</li>
<li>Baxter</li>
<li>Bear</li>
<li>Beau</li>
</ul>
<ul>
<li>Blue</li>
<li>Bo</li>
<li>Beau</li>
<li>Benji</li>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
</ul>
<ul>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
<li>Benji</li>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
</ul>
</div><!-- end of results list -->
<div class="more-btn">
<button><a href="" class="">Tap to See More Names</a></button>
</div><!-- end of dnt btn -->
</div><!-- end of male popup -->
<div class="white-popup mfp-hide female-dog" id="female-modal">
<div class="popup-logo">
<a class="logo teal"></a>
</div><!-- end of logo -->
<h1>Most Popular Female <br> Dog Names</h1>
<img src="/img/dnt/femail-puppy.png" alt="Female puppy">
<div class="results-list">
<ul>
<li>Abby</li>
<li>Apollo</li>
<li>Bailey</li>
<li>Bandit</li>
<li>Baxter</li>
<li>Bear</li>
<li>Beau</li>
</ul>
<ul>
<li>Blue</li>
<li>Bo</li>
<li>Beau</li>
<li>Benji</li>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
</ul>
<ul>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
<li>Benji</li>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
</ul>
</div><!-- end of results list -->
<div class="more-btn">
<button><a href="" class="">Tap to See More Names</a></button>
</div><!-- end of dnt btn -->
</div><!-- end of female popup -->
<div class="white-popup mfp-hide all-genders" id="all-modal">
<div class="popup-logo">
<a class="logo teal"></a>
</div><!-- end of logo -->
<h1>Most Popular Dog Names</h1>
<img src="/img/dnt/gender-all.png">
<div class="results-list">
<ul>
<li>Abby</li>
<li>Apollo</li>
<li>Bailey</li>
<li>Bandit</li>
<li>Baxter</li>
<li>Bear</li>
<li>Beau</li>
</ul>
<ul>
<li>Blue</li>
<li>Bo</li>
<li>Beau</li>
<li>Benji</li>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
</ul>
<ul>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
<li>Benji</li>
<li>Benny</li>
<li>Bentley</li>
<li>Blue</li>
</ul>
</div><!-- end of results list -->
<div class="more-btn">
<button><a href="" class="">Tap to See More Names</a></button>
</div><!-- end of dnt btn -->
</div><!-- end of results popup -->
<script>
$(document).ready(function() {
$('#dnt').submit(function(e){
e.preventDefault(); // We don't need to send the form, because it all local
if($('#male').is(':checked')) { // Check if male is checked
$.magnificPopup.open({ // open pop up for male
items: {
src: '#male-modal',
type: 'inline'
}//items
});///popup open
} else if($('#female').is(':checked')) { // Check if female is checked
$.magnificPopup.open({ // open pop up for female
items: {
src: '#female-modal',
type: 'inline'
}
});///popup open
} else if($('#all').is(':checked')) { // Check if all is checked
$.magnificPopup.open({
items: {
src: '#all-modal',
type: 'inline'
}
});
}
$('.white-popup').addClass('animated slideInRight');
});///submit function
});//JQuery
我想念什么?
您可以簡單地將animate.css類添加到magnificPopup
的mainClass
中。
-更新-
添加了一個示例,其中選項type
設置為inline
。
干得好。
$('#image-button').magnificPopup({ items: { src: 'http://placehold.it/300' }, type: 'image', // add your animate.css class here mainClass: 'animated bounceIn' }); $('#inline-button').magnificPopup({ items: { src: '#inline-popup' }, type: 'inline', // add your animate.css class here mainClass: 'animated flipInY' });
.white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <button id="image-button">Image Example</button> <button id="inline-button">Inline Example</button> <div id="inline-popup" class="white-popup mfp-hide"> Popup content </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.