Bootstrap Learning Note JS Plugin (one)-modal popup box

First, the Popup box Foundation

<div class= "modal show" >    <div class= "Modal-dialog" >        <div class= "Modal-content" >            < Div class= "Modal-header" >                <button type= "button" class= "Close" data-dismiss= "modal" ><span Aria-hidden= "true" >&times;</span><span class= "Sr-only" >Close</span></button>                
The pop-up box header , generally used "Modal-header", mainly includes the title and Close button
popup body , generally using "modal-body", the main content of pop-up box
? The pop-up frame foot , generally using "modal-footer" means, the main Place action button
tips:.show{Display:block}
Second, the size of the popup box
<divclass="Modal Fade Bs-example-modal-lg"tabindex="-1"role="Dialog"aria-labelledby="Mylargemodallabel"aria-hidden="true"> <divclass="Modal-dialog MODAL-LG">//.modal-lg or. model-sm <divclass="modal-content"> <divclass="Modal-header"> <button type="Button" class="Close"data-dismiss="modal"><span aria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button> class="Modal-title"> Modal popup title class="Modal-body"> <p> modal popup body content </p> </div> <divclass="Modal-footer"> <button type="Button" class="btn Btn-default"data-dismiss="modal"> Close </button> <button type="Button" class="btn Btn-primary"> Save </button> </div> </div> </div></div>
. modal-lg for large popup box;. model-sm for small pop-up box
Third, two ways to trigger modal popup box
3.1 Trigger with Data-target
<button type="Button"data-toggle="modal"data-target="#mymodal" class="btn Btn-primary"> Click I will pop-up the modal popup </button><!--modal pop-up window--><divclass="Modal Fade"Id="Mymodal"> <divclass="Modal-dialog"> <divclass="modal-content"> <!--modal popup content--</div> </div></div>
Note the following items:
1, Data-toggle must be set to modal (toggle Chinese translation comes up is the trigger);
2, Data-target can be set to CSS selector, can also be set to the modal popup ID value, the general setting is the modal popup ID value, because the ID value is a unique value.
3.2 Use <a> Trigger
<a data-toggle="modal"href="#mymodal" class="btn Btn-primary"> Click I will pop-up the modal popup </a><!--modal pop-up window--><divclass="Modal Fade"Id="Mymodal"> <divclass="Modal-dialog"> <divclass="modal-content"> <!--modal popup content--</div> </div></div>
Replace the Data-target property with the <a>-brought href attribute
Four, pop-up box to increase animation effect
You can add a transition animation effect to the modal popover by adding the class name "Fade" to ". Modal".
Bootstrap Learning Note JS Plugin (one)-modal popup box