Introduction to the use of BootStrap model pop-up box_javascript skills

Before, we explained the use of bootstrap tab. Today we will learn about the use of model pop-up window in bootstrap.

Effect:

Code:

<input id="btntext" type="button" value="添加文本组件" 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">×</button>
<h3 id="Modal-header">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

It’s very simple, that’s it.

Note: The data-target attribute points to the id of the model, 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 to let the model go to a remote url. Of course, you can write the content you want directly in the model-body.

Look carefully at the div structure of the model, and you will understand that model-body represents the content, and model-header represents the header. If you want to add two buttons at the bottom, you have to use the following code.

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

Note: If you want to set the width of the model, you must add a layout. Just put the model in the code block below and set the width of the model. style="width:500px". By the way, you can't use span style and put it directly into the class. .

<div class="container"></div>

The above is the use of BootStrap model pop-up box introduced by the editor. I hope it will be helpful to everyone!