bootstrap modal模态框 bootstrapmodal|Bootstrap教程

Boostrap程序模态插件是一个对话框/弹出窗口，显示在当前页面的顶部。
Boostrap模态示例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Modal Example< /h2> < !-- Trigger the modal with a button --> < button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal< /button>< !-- Modal --> < div class="modal fade" id="myModal" role="dialog"> < div class="modal-dialog">< !-- Modal content--> < div class="modal-content"> < div class="modal-header"> < button type="button" class="close" data-dismiss="modal">×< /button> < h4 class="modal-title">Modal Header< /h4> < /div> < div class="modal-body"> < p>Write your text in the modal.< /p> < /div> < div class="modal-footer"> < button type="button" class="btn btn-default" data-dismiss="modal">Close< /button> < /div> < /div>< /div> < /div>< /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F3341U9-1.jpg">< /script> < /body> < /html>

Boostrap模态尺寸
你可以通过添加.modal-sm类（用于小模态）或.modal-lg类（用于大模态）来更改模态的大小。
size类通过.modal-dialog类添加到< div> 元素中。
小模态：
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Small Modal< /h2> < !-- Trigger the modal with a button --> < button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal< /button>< !-- Modal --> < div class="modal fade" id="myModal" role="dialog"> < div class="modal-dialog modal-sm"> < div class="modal-content"> < div class="modal-header"> < button type="button" class="close" data-dismiss="modal">×< /button> < h4 class="modal-title">Modal Header< /h4> < /div> < div class="modal-body"> < p>This is a small modal.< /p> < /div> < div class="modal-footer"> < button type="button" class="btn btn-default" data-dismiss="modal">Close< /button> < /div> < /div> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F3341U9-1.jpg">< /script> < /body> < /html>

Bootstrap大模态
【bootstrap modal模态框】请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Large Modal< /h2> < !-- Trigger the modal with a button --> < button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal< /button>< !-- Modal --> < div class="modal fade" id="myModal" role="dialog"> < div class="modal-dialog modal-lg"> < div class="modal-content"> < div class="modal-header"> < button type="button" class="close" data-dismiss="modal">×< /button> < h4 class="modal-title">Modal Header< /h4> < /div> < div class="modal-body"> < p>This is a large modal.< /p> < /div> < div class="modal-footer"> < button type="button" class="btn btn-default" data-dismiss="modal">Close< /button> < /div> < /div> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1F3341U9-1.jpg">< /script> < /body> < /html>