Introduction to the Bootstrap model pop-up box using _javascript tips

Before, we explained the use of Bootstrap tab, today we come to understand the use of the Model pop-up window in bootstrap.

Effect:

Code:

<input id= "btntext" type= button "value=" Add text Component "data-toggle=" modal "data-target=" #myModal "href=". /sysmanage/zujianmanage.aspx "/>
<!--Modal-->
<div class=" Modal Hide Fade "id=" Mymodal "TabIndex = "-1" role= "dialog" >
<div class= "Modal-header" ><button class= "Close" type= "button" data-dismiss= " Modal ">x</button>
 
 

It's easy, it's OK.

Note: The Data-target attribute, pointing to the ID of model, so click on the button, model will bounce out.

Of course, you can also use JS to control.

The following code:

Showing: $ (' #myModal '). Modal (' show ');

Hidden: $ (' #myModal '). Modal (' hide ');

Switch: $ (' #myModal '). Modal (' Toogle ');

Event: $ (' #myModal '). On (' Hidden ', function () {//do something ...});

Note: I use the href attribute here, which is let model go to remote a URL. Of course, you can write the content you want directly in the model-body.

Seriously look at the model div structure, you will understand that Model-body is representative content, Model-header is the head, then if you want to add two buttons at the bottom, then you have to use the following code.

<div class= "Modal-footer" >
<a href= "#" class= "BTN" > Close </a>
<a href= "# class=" btn Btn-primary "> Save </a>
</div>

Note: If you want to set the width of the model, you must add the layout. is to put the model in the following code block, and set the width of model. Style= "width:500px". Yes, you can't just put it in the class with the span style.

<div class= "Container" ></div>

The above is a small series to introduce the Bootstrap model pop-up box use, I hope to help!