Bootstrap modal use and click on the outside of the solution _javascript tips

The example of this article for everyone to share the use of bootstrap modal and click on the outside to disappear the solution, for your reference, the specific content as follows

1. 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> 
 
 

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 to let modal to remote a URL. Of course, you can write the content you want directly in the modal-body.

Seriously look at the modal div structure, you will understand that Modal-body is representative content, Modal-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> 

Note: If you want to set the width of the modal, you must add the layout. is to put the modal in the following code block and set the width of the modal. Style= "width:500px". By the right, you can't put the span style directly into class.

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

If you want the pop-up box to click outside and not disappear, add the following property to the component that triggers the modal box data-backdrop= "Static"

<div class= "Modal Hide Fade id=" Mymodal "tabindex="-1 "role=" dialog "<span style=" Font-family:arial 

, XXFarEastFont-Arial, Sans-serif, Tahoma, ' Microsoft Yahei '; font-size:14px; line-height:24px; " >

<span style= "color: #ff6666;" >data-backdrop= "Static" </span>

</span>> 
</div> 

For more information, please click on the topic "Bootstrap Modal use Tutorial" to learn, I hope you like.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.