Plugin របស់ jQuery សំរាប់បង្ហាញ Modal ពេញទំហំរបស់អេក្រង់ ដោយមាន CSS3 Transition Animated Modal.JS

Animated Modal.JS គឺជា Plugin របស់ jQuery ដែលមានលក្ខណៈresponsive ដែលត្រូវបានប្រើប្រាស់ សំរាប់បង្កើត Modal ដែលមានទំហំពេញផ្ទៃអេក្រង់  ដោយមាន CSS3 Transistion។ ហើយ Transition យើងអាចប្រើប្រាស់ animated.css ឬ អាចសរសេរបានដោយខ្លួនឯង។

របៀបប្រើប្រាស់

១. ភ្ជាប់ឯកសារ Animated.css មកកាន់ឯកសារ htmlរបស់អ្នកដោយ សរសេរ

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">  

២. នៅក្នុង Body របស់ឯកសារ html សរសេរដូចកូដខាងក្រោម

 <!--Call your modal-->  
   <a id="demo01" href="#animatedModal">DEMO01</a>  
   <!--DEMO01-->  
   <div id="animatedModal">  
     <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->  
     <div class="close-animatedModal">   
       CLOSE MODAL  
     </div>  
     <div class="modal-content">  
          <!--Your modal content goes here-->  
     </div>  
   </div>  

៣. អ្នកអាចសរសេរកូចខាងក្រោមនេះ ដាក់ទៅខាងក្រោម

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="yourPath/animatedModal.min.js"></script>  

៤. ចុងក្រោយ សរសេរកូដដើម្បីបង្ហាញ Modal កាលណាគេចុចលើពាក្យ Demo

 <script>  
  $("#demo01").animatedModal();  
 </script>  

ប្រភព៖ http://joaopereirawd.github.io/animatedModal.js/