bootstrap modal box usage

Usage of bootstrap modal box: 1. Through the data attribute, set the "data-target="#myModal"" selector content at the same time; 2. Through js, directly use the code "$('#myModal' ).modal(options)" etc.

#The operating environment of this article: Windows7 system, bootstrap3, Dell G3 computer.

bootstrap’s modal box

If you only want to use the modal box function alone, you can introduce modal.js separately, and bootstrap’s css, in bootstrap In the package, bootstrap.js can be introduced.

Usage

1. Through the data attribute, such as setting the data-toggle='"modal" of a button, and setting the data-target= "#myModal" selector content,

2. directly use the code $('#myModal').modal(options)

3. through js to model The modal box is mainly composed of three parts, model-head, modal-body, and model-footer. The main content is displayed in the body. Class="close" is a closed modal box style.

4. Several commonly used methods$('#identifier').modal('toggle') switches the modal box state

   $('#identifier'). modal('show') Show modal box

   $('#identifier').modal('hide') Hide modal box

##show.bs.modalIn Triggered after calling the show method. $('#myModal').on('show.bs.modal',function () {alert("Show modal box");});shown.bs.modalTriggered after calling the show method. $('#myModal').on('shown.bs.modal', function () {alert("Show modal completely"); });hide.bs.modalTriggered after calling the hide method. $('#myModal').on('hide.bs.modal', function () {alert("Hide modal box");});hidden.bs.modalTriggered after calling the hide method. $('#myModal').on('hidden.bs.modal', function () {alert("Completely hide the modal box"); });

Event	Function	Usage

Use two steps

1.Introduce the following three files in order

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script sype="text/JavaScript" src="./jquery.min.js"></script>
<script sype="text/JavaScript" src="../js/bootstrap.min.js"></script>

2.Copy the following in the page The code

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center" id="myModalLabel">标题是什么</h4>
            </div>
            <div class="modal-body">
                写你HTML文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

is simple. The modal box needs a trigger. Add the following attributes to the html element that triggers the modal box.

data-toggle="modal" data-target="#myModal"

Observe the following and you will find that myModal in this

data-target="#myModal" is the id of the div where the modal box is located

(Recommended: "

bootstrap Tutorial")

The above is the detailed content of bootstrap modal box usage. For more information, please follow other related articles on the PHP Chinese website!