隐藏弹出式插件
问题描述:
我正在使用Reveal jQuery插件。 http://www.zurb.com/playground/reveal-modal-plugin隐藏弹出式插件
如何设置自动隐藏例如在5秒内?
我发现这个代码更它不工作,我不知道在哪个文件,包括它:how to auto hide jquery reveal plugin
/*
* jQuery Reveal Plugin 1.0
* www.ZURB.com
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
\t
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
\t // $('a[data-reveal-id]').live('click', function(e) {
\t // \t e.preventDefault();
\t // \t var modalLocation = $(this).attr('data-reveal-id');
\t // \t $('#'+modalLocation).reveal($(this).data());
\t // });
\t $(document).on('click', 'a[data-reveal-id]', function(e) {
\t \t e.preventDefault();
\t \t var modalLocation = $(this).attr('data-reveal-id');
\t \t $('#'+modalLocation).reveal($(this).data());
\t });
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
\t \t animation: 'fadeAndPop', //fade, fadeAndPop, none
\t \t animationspeed: 300, //how fast animtions are
\t \t closeonbackgroundclick: true, //if you click background will modal close?
\t \t dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
\t };
\t
//Extend dem' options
var options = $.extend({}, defaults, options);
\t
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
\t var modal = $(this),
\t \t topMeasure = parseInt(modal.css('top')),
\t \t \t \t topOffset = modal.height() + topMeasure,
\t \t locked = false,
\t \t \t \t modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
\t \t \t if(modalBG.length == 0) {
\t \t \t \t modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
\t \t \t } \t \t
/*---------------------------
Open & Close Animations
----------------------------*/
\t \t \t //Entrance Animations
\t \t \t modal.bind('reveal:open', function() {
\t \t \t modalBG.unbind('click.modalEvent');
\t \t \t \t $('.' + options.dismissmodalclass).unbind('click.modalEvent');
\t \t \t \t if(!locked) {
\t \t \t \t \t lockModal();
\t \t \t \t \t if(options.animation == "fadeAndPop") {
\t \t \t \t \t \t modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
\t \t \t \t \t \t modalBG.fadeIn(options.animationspeed/2);
\t \t \t \t \t \t modal.delay(options.animationspeed/2).animate({
\t \t \t \t \t \t \t "top": $(document).scrollTop()+topMeasure + 'px',
\t \t \t \t \t \t \t "opacity" : 1
\t \t \t \t \t \t }, options.animationspeed,unlockModal()); \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t if(options.animation == "fade") {
\t \t \t \t \t \t modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
\t \t \t \t \t \t modalBG.fadeIn(options.animationspeed/2);
\t \t \t \t \t \t modal.delay(options.animationspeed/2).animate({
\t \t \t \t \t \t \t "opacity" : 1
\t \t \t \t \t \t }, options.animationspeed,unlockModal()); \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t if(options.animation == "none") {
\t \t \t \t \t \t modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
\t \t \t \t \t \t modalBG.css({"display":"block"}); \t
\t \t \t \t \t \t unlockModal() \t \t \t \t
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t modal.unbind('reveal:open');
\t \t \t }); \t
\t \t \t //Closing Animation
\t \t \t modal.bind('reveal:close', function() {
\t \t \t if(!locked) {
\t \t \t \t \t lockModal();
\t \t \t \t \t if(options.animation == "fadeAndPop") {
\t \t \t \t \t \t modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
\t \t \t \t \t \t modal.animate({
\t \t \t \t \t \t \t "top": $(document).scrollTop()-topOffset + 'px',
\t \t \t \t \t \t \t "opacity" : 0
\t \t \t \t \t \t }, options.animationspeed/2, function() {
\t \t \t \t \t \t \t modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
\t \t \t \t \t \t \t unlockModal();
\t \t \t \t \t \t }); \t \t \t \t \t
\t \t \t \t \t } \t
\t \t \t \t \t if(options.animation == "fade") {
\t \t \t \t \t \t modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
\t \t \t \t \t \t modal.animate({
\t \t \t \t \t \t \t "opacity" : 0
\t \t \t \t \t \t }, options.animationspeed, function() {
\t \t \t \t \t \t \t modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
\t \t \t \t \t \t \t unlockModal();
\t \t \t \t \t \t }); \t \t \t \t \t
\t \t \t \t \t } \t
\t \t \t \t \t if(options.animation == "none") {
\t \t \t \t \t \t modal.css({'visibility' : 'hidden', 'top' : topMeasure});
\t \t \t \t \t \t modalBG.css({'display' : 'none'}); \t
\t \t \t \t \t } \t \t
\t \t \t \t }
\t \t \t \t modal.unbind('reveal:close');
\t \t \t });
\t
/*---------------------------
Open and add Closing Listeners
----------------------------*/
\t //Open Modal Immediately
\t modal.trigger('reveal:open')
\t \t \t
\t \t \t //Close Modal Listeners
\t \t \t var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() {
\t \t \t modal.trigger('reveal:close')
\t \t \t });
\t \t \t
\t \t \t if(options.closeonbackgroundclick) {
\t \t \t \t modalBG.css({"cursor":"pointer"})
\t \t \t \t modalBG.bind('click.modalEvent', function() {
\t \t \t \t modal.trigger('reveal:close')
\t \t \t \t });
\t \t \t }
\t \t \t //$('body').keyup(function(e) {
\t \t //if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
\t \t \t //});
\t \t \t
\t \t \t
/*---------------------------
Animations Locks
----------------------------*/
\t \t \t function unlockModal() {
\t \t \t \t locked = false;
\t \t \t }
\t \t \t function lockModal() {
\t \t \t \t locked = true;
\t \t \t } \t
\t \t \t
});//each call
}//orbit plugin call
})(jQuery);
谢谢
答
您可以添加以下回答代码how to auto hide jquery reveal plugin
$('.button').on('click', function(){
$('#myModal').reveal();
delayedHideModal('#myModal', 5)
});
function delayedHideModal(selector, sec){
setTimeout(function(){ $(selector).trigger('reveal:close'); }, sec*1000)
}
将此代码添加到您要调用Reveal插件的js文件中。您也可以使用其他选择器,但不要单击button
类,然后单击您要打开的Reveal插件。该示例使用触发reveal:close
事件处理程序的setTimeout
.Here #myModal
是您要在Reveal插件中打开的选择器。
用法:创建一个HTML文件(例如test.html的),或者要包括像下面
<html>
<head>
<!-- Add jquery file as dependency of reveal.js-->
<script src="jquery.min.js"></script>
<!-- Add reveal plugin -->
<script src="jquery.reveal.js"></script>
<script>
$(document).ready(function(){
function delayedHideModal(selector, sec){
setTimeout(function(){ $(selector).trigger('reveal:close'); }, sec*1000)
}
$('.button').on('click', function(){
$('#myModal').reveal();
delayedHideModal('#myModal', 5);
});
});
</script>
</head>
<body>
<div id="myModal">
this is inside reveal
</div> <br/> <br>
<button class="button">Click here to reveal</button>
</body>
</html>
谢谢您的回复JavaScript文件的任何其它HTML文件。这是在jquery.reveal.js文件中?我试图粘贴代码,但没有,它不起作用 –
不,这应该是一个使用jquery.reveal.js文件的外部js文件。我会更新我的代码。 – Niladri
更新了我的回答,附带示例html – Niladri