Previously, we explained the use of bootstrap tab. Today we will learn about the use of model pop-up windows 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 id="myModal" tabindex="-1" role="dialog"><div><button type="button" data-dismiss="modal">×</button><h3 id="myModalLabel">Modal header</h3></div><div></div>
It's very simple, that's all.
Note: The data-target property points to the model's id, so click the button and the model will pop up.
Of course you can also use js to control it.
The following code:
Show: $('#myModal').modal('show');
Hide: $('#myModal').modal('hide');
Switch: $('#myModal').modal('toogle');
Event: $('#myModal').on('hidden', function () {// do something…});
Note: I used the href attribute here, which is to let the model remote a url. Of course, you can write what you want directly into the model-body.
If you look at the div structure of model carefully, you will understand that model-body represents content and model-header is the header. So if you want to add two buttons at the bottom, you have to use the following code.
<div><a href="#">Close</a><a href="#">Save</a></div>
Note: If you want to set the width of the model, you must add the layout. It is to place the model in the code block below and set the width of the model. style="width:500px". By the way, you can't just put it in the class using the span style. .
<div></div>
The above is the use of the BootStrap model pop-up box introduced to you by the editor. I hope it will be helpful to everyone!