แนะการใช้ Modal jquery เอะมันคืออะไร ?

Modal มันก่อคือ popup อย่างนึงล่ะครับ เคยเจอกันไหมครับตามเว็บทั่วๆไป แต่ส่วนของ Modal จะไม่เป็นเหมือน popup ทั่วๆไป คือ Modal เราจะไม่ทำให้มันเลื่อนได้ นั้นเอง เอารูปไปดูแล้วกันนะ วิธีใช่ก่อตามไปข้างล่างเลย ทั้งหมดอยู่ในไฟล์ HTML เดียวกัน

ส่วนที่ 1จะเป็นส่วนของปุ่มนะครับ เหมือนเป็นตัวสวิชต์ใน Modal นี้ทำงาน กดปุ๊ปขึ้นปั๊ป จะตกแต่งก่อได้นะ ยัด CSS เข้าไป

<a href="#" id="button">Click me</a>

ส่วนที่ 2 จะเป็นเมื่อเรากด button จะแสดงข้อความส่วนนี้

<div id="modal">

/* ส่วนของขอความที่จะแสดง */
 <div id="heading">
  Are you sure you want to do that?
 </div>

 <div id="content">
  <p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>

  <a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>

  <a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
 </div>
</div>

ส่วนที่ 3 ตัวนี้ใจกลางของคำสั่งการทำงานเลยครับ ใส่ในไฟล์ html เลยครับ

<!--jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="js/jquery.reveal.js"></script> //กำหนดไฟล์อยู่ในโฟลเดอร์ js เปลี่ยนโฟลเดอร์ได้ ต้องมาเปลี่ยนที่ลิงค์นี้ด้วย 

 <script type="text/javascript">
  $(document).ready(function() {
            $('#button').click(function(e) { // ส่วนของการกำหนด button ให้สัมผัสกับส่วนของ id ในตอนต้น
          $('#modal').reveal({ // อยู่ในส่วนของการแสดงข้อความนะครับ เรากำหนด id ตรงนี้ 
       animation: 'fade',      // fade, fadeAndPop, none
                animationspeed: 600,        // ความเร็วการแสดง modal ขึ้นมา เลขมายิ่งช้าครับ
     closeonbackgroundclick: true,       
     dismissmodalclass: 'close'    
    });
   return false;
   });

  });
 </script>

ทั้งหมดนี้ก่อเป็นหลักๆของการทำงานของมัน นอกนั้นก่อเหลือแต่การตกแต่งทำความเข้าใจกับ CSS แล้วละครับ หรือใครจะเอา Login Flat UI  เอาส่วนของ form มาใส่ในส่วนที่ 2  อ๋ออย่าลืมทำตามในทุกขึ้นตอนนะ ห้ามข้ามเด้อ

<div id="modal">   
           //ใส่ในส่วนนี้เลย
</div>

ไฟล์ jquery.reveal.js เอาไปใส่ใน โฟลเดอร์ js  สามารถเปลี่ยนโฟลเดอร์ได้ ให้ไปเปลี่ยนในส่วนที่ 3 

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