jquery 팝업 대화 상자가 onclick 대신에

Question

많은 것들을 시도했지만, 다운로드 한 어떤 코드가 다른 것들과 다릅니다. 어떤 종류의 것을 찾을 수 없기 때문에 document.onload = 함수를 발견하고 이후에 onload를 추가 했으므로 "문서"는 전혀 작동하지 않습니다. 내 JS 코드는 다음과 같습니다

/* 
* 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 
----------------------------*/ 

/*--------------------------- 
Listener for data-reveal-id attributes 
----------------------------*/ 

    $('a[data-reveal-id]').live('click', function(e) { 
     e.preventDefault(); 
     var modalLocation = $(this).attr('data-reveal-id'); 
     $('#'+modalLocation).reveal($(this).data()); 
    }); 

/*--------------------------- 
Extend and Execute 
----------------------------*/ 

    $.fn.reveal = function(options) { 


     var defaults = { 
      animation: 'fadeAndPop', //fade, fadeAndPop, none 
      animationspeed: 300, //how fast animtions are 
      closeonbackgroundclick: true, //if you click background will modal close? 
      dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal 
     }; 

     //Extend dem' options 
     var options = $.extend({}, defaults, options); 

     return this.each(function() { 

/*--------------------------- 
Global Variables 
----------------------------*/ 
      var modal = $(this), 
       topMeasure = parseInt(modal.css('top')), 
       topOffset = modal.height() + topMeasure, 
       locked = false, 
       modalBG = $('.reveal-modal-bg'); 

/*--------------------------- 
Create Modal BG 
----------------------------*/ 
      if(modalBG.length == 0) { 
       modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal); 
      }   

/*--------------------------- 
Open & Close Animations 
----------------------------*/ 
      //Entrance Animations 
      modal.bind('reveal:open', function() { 
       modalBG.unbind('click.modalEvent'); 
       $('.' + options.dismissmodalclass).unbind('click.modalEvent'); 
       if(!locked) { 
        lockModal(); 
        if(options.animation == "fadeAndPop") { 
         modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'}); 
         modalBG.fadeIn(options.animationspeed/2); 
         modal.delay(options.animationspeed/2).animate({ 
          "top": $(document).scrollTop()+topMeasure + 'px', 
          "opacity" : 1 
         }, options.animationspeed,unlockModal());     
        } 
        if(options.animation == "fade") { 
         modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure}); 
         modalBG.fadeIn(options.animationspeed/2); 
         modal.delay(options.animationspeed/2).animate({ 
          "opacity" : 1 
         }, options.animationspeed,unlockModal());     
        } 
        if(options.animation == "none") { 
         modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure}); 
         modalBG.css({"display":"block"}); 
         unlockModal()    
        } 
       } 
       modal.unbind('reveal:open'); 
      });  

      //Closing Animation 
      modal.bind('reveal:close', function() { 
       if(!locked) { 
        lockModal(); 
        if(options.animation == "fadeAndPop") { 
         modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
         modal.animate({ 
          "top": $(document).scrollTop()-topOffset + 'px', 
          "opacity" : 0 
         }, options.animationspeed/2, function() { 
          modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'}); 
          unlockModal(); 
         });     
        } 
        if(options.animation == "fade") { 
         modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
         modal.animate({ 
          "opacity" : 0 
         }, options.animationspeed, function() { 
          modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure}); 
          unlockModal(); 
         });     
        } 
        if(options.animation == "none") { 
         modal.css({'visibility' : 'hidden', 'top' : topMeasure}); 
         modalBG.css({'display' : 'none'}); 
        }  
       } 
       modal.unbind('reveal:close'); 
      });  

/*--------------------------- 
Open and add Closing Listeners 
----------------------------*/ 
      //Open Modal Immediately 
     modal.trigger('reveal:open') 

      //Close Modal Listeners 
      var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() { 
       modal.trigger('reveal:close') 
      }); 

      if(options.closeonbackgroundclick) { 
       modalBG.css({"cursor":"pointer"}) 
       modalBG.bind('click.modalEvent', function() { 
        modal.trigger('reveal:close') 
       }); 
      } 
      $('body').keyup(function(e) { 
       if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key 
      }); 


/*--------------------------- 
Animations Locks 
----------------------------*/ 
      function unlockModal() { 
       locked = false; 
      } 
      function lockModal() { 
       locked = true; 
      } 

     });//each call 
    }//orbit plugin call 
})(jQuery); 

및 HTML 코드 :

나는 2 자바 스크립트 코드가 필요한 경우

<!DOCTYPE html> 
<!-- 
* Markup for jQuery Reveal Plugin 1.0 
* www.ZURB.com/playground 
* Copyright 2010, ZURB 
* Free to use under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
--> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Reveal Demo</title> 

     <!-- Attach our CSS --> 
     <link rel="stylesheet" href="reveal.css"> 

     <!-- Attach necessary scripts --> 
     <!-- <script type="text/javascript" src="jquery-1.4.4.min.js"></script> --> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
     <script type="text/javascript" src="jquery.reveal.js"></script> 

     <style type="text/css"> 
      body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; } 
      .big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; } 
     </style> 

    </head> 
    <body> 

     <a href="#" class="big-link" data-reveal-id="myModal"> 
      Fade and Pop 
     </a>  

     <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> 
      Fade 
     </a> 

     <a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"> 
      None 
     </a> 

     <div id="myModal" class="reveal-modal"> 
      <h1>Reveal Modal Goodness</h1> 
      <p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p> 
      <a class="close-reveal-modal">&#215;</a> 
     </div> 

    </body> 
</html> 

, (나는 오랜 시간 동안 차단 한) 아래로 속도를하지 말아주십시오. 미리 감사드립니다.

Answer 1

data-reveal-id을 사용하면 클릭 한 번으로 플러그인을 실행할 수 있습니다. 프로그래밍 방식으로 트리거 할 수도 있습니다. 페이지로드시 트리거하려는 경우 :

$(document).ready(function() { 
    // trigger reveal manually. 
    $('#myModal').reveal({ 
    animation: 'fadeAndPop',     //fade, fadeAndPop, none 
    animationspeed: 300,      //how fast animtions are 
    closeonbackgroundclick: true,    //if you click background will modal close? 
    dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal 
    }); 
}); 

자세한 내용은 documentation을 참조하십시오.

Answer 2

원하는 링크 (예 : 첫 번째 링크)에 대해 click 이벤트를 트리거하십시오. </head> 전에이 블록의 코드를 추가

<script> 
    $(function() { 
     $('[data-reveal-id]').eq(0).trigger('click'); 
    }); 
</script> 

jsFiddle Demo합니다.