English 中文(简体)
Bootstrap Tutorial

Bootstrap with CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Demos

Bootstrap Useful Resources

Selected Reading

Bootstrap - Modal Plugin
  • 时间：2024-09-17

Bootstrap - Modal Plugin

Previous Page Next Page  

A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.

If you want to include this plugin functionapty inspanidually, then you will need modal.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

You can toggle the modal plugin s hidden content −

    Via data attributes − Set attribute data-toggle = "modal" on a controller element, pke a button or pnk, along with a data-target = "#identifier" or href = "#identifier" to target a specific modal (with the id = "identifier") to toggle.

    Via JavaScript − Using this technique you can call a modal with id = "identifier" with a single pne of JavaScript −

$( #identifier ).modal(options)

Example

A static modal window example is shown in the following example −

<h2>Example of creating Modals with Twitter Bootstrap</h2>

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

<!-- Modal -->
<span class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <span class = "modal-dialog">
      <span class = "modal-content">
         
         <span class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </span>
         
         <span class = "modal-body">
            Add some text here
         </span>
         
         <span 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>
         </span>
         
      </span><!-- /.modal-content -->
   </span><!-- /.modal-dialog -->
  
</span><!-- /.modal -->