ポップアッププラグインを隠す

Question

私は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); 
 
    

は、あなたが以下を追加することができますあなたの

Answer 1

ありがとうございました答えのコード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ファイルにこのコードを追加します。 Revealプラグインを開くクリックでもbuttonクラス以外のセレクタを使用することができます。この例では、reveal:closeイベントハンドラをトリガするsetTimeoutを使用しています。#myModalは、Revealプラグインで開くセレクタです。

使用方法：（例えばtest.htmlという）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>