Learning notes for Bootstrap modal frames

Modal boxes (Modal) are subforms that are overlaid on the parent form, providing information, interactivity, and so on. Using modal windows, you need to have some kind of trigger.

Setting the property data-toggle= "modal" on a controller element (such as a button or link) indicates that a modal box is triggered.

Set data-target= "#myModal" or href= "#mymodal" to specify a specific modal box to toggle (with id= "mymodal").

Mymodal is a modal box-defined ID that points to a specific modal box. #表示在本页面弹出. data-target= "#myModal" is the target of the modal box you want to load on the page.

You can create multiple modal boxes on a page, and then create different triggers for each modal box.

<div = "modal Fade"  id=  "Mymodal"  tabindex= role=" dialog " aria-labelledby= "Mymodallabel" aria-hidden= "true" > 
   

• There are two points to note in the Modal box:
  • The first is . Modal, used to identify the contents of <div> as modal frames.
  • The second is . Fade class. When the modal box is toggled, it causes the content to fade in and out.

• aria-labelledby= "Mymodallabel", which refers to the caption of the modal box.
• the Aria-hidden= property "true" is used to keep the modal window from being visible until the trigger is triggered

• <divClass="Modal-dialog"><divclass="Modal-content"> <divClass="Modal-header">           

• • <div class= "Modal-header" >,modal-header is a class that defines styles for the head of a modal window.

    <button type= "button"  class< Span class= "pun" >= "close"  data-dismiss=< Span class= "ATV" > "modal"  aria-hidden=> &times; </BUTTON>              

• • class= "Close" , Close is a CSS class that sets the style for the close button of the modal window. The x in the upper-right corner of the modal box closes.
  • data-dismiss= "modal" , which is a custom HTML5 data property. Here it is used to close the modal window.

   class= "modal-title"  Span class= "ATN" >id= "Mymodallabel" > </div> span class= "tag" ><div class= " Modal-body "> here Add some text </DIV>    

• • class= "Modal-body" , is a CSS class for Bootstrap CSS that sets the style for the body of the modal window.

     <div class = "Modal-footer" >        

• • class= "Modal-footer"is a CSS class for Bootstrap CSS that sets the style for the bottom of the modal window.

   <button Type= "button"  class= data-dismiss=" modal "> close </button> < Button type= "button"  Span class= "ATN" >class= "btn btn-primary" >  submit changes </button> </div> </div></div>  

< Span class= "ATV" >< Span class= "ATN" >< Span class= "ATV" >< Span class= "ATN" >       

< Span class= "ATV" >< Span class= "pun" >< Span class= "ATN" >                  

Learning notes for Bootstrap modal frames