使用事件的Bootstrap Modal插件

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = btn btn-primary btn-lg data-toggle = modal data-target = #myModal>
   Launch demo modal
</button>

<!-- Modal -->
<div class = modal fade id = myModal tabindex = -1 role = dialog 
   aria-labelledby = myModalLabel aria-hidden = true>

   <div class = modal-dialog>
      <div class = modal-content>

         <div class = modal-header>
            <button type = button class = close data-dismiss = modal aria-hidden = true>
               ×
            </button>

            <h4 class = modal-title id = myModalLabel>
               This Modal title
            </h4>
         </div>

         <div class = modal-body>
            Click on close button to check Event functionality.
         </div>

         <div class = modal-footer>
            <button type = button class = btn btn-default data-dismiss = modal>
               Close
            </button>

            <button type = button class = btn btn-primary>
               Submit changes
            </button>
         </div>

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

相关文章

<!DOCTYPE html> <html> <head> <titl...
<!DOCTYPE html> <html> <head> <titl...
<!DOCTYPE html> <html> <head> <titl...
<!DOCTYPE html> <html> <head> <titl...
<!DOCTYPE html> <html> <head> <titl...
<!DOCTYPE html> <html> <head> <titl...