<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>模態(tài)彈出窗的使用</title>
<link?rel="stylesheet"?>
</head>
<body>
<!--下面是代碼任務(wù)部分-->
<!--?href觸發(fā)模態(tài)彈出窗元素?-->
<a?data-toggle="modal"?href="#mymodal-link"?class="btn?btn-primary">通過鏈接href屬性觸發(fā)</a>
<!--?模態(tài)彈出窗內(nèi)容?-->
<div?class="modal"?tabindex="-1"?role="dialog"?aria-labelledby="myLargeModalLabel"?aria-hidden="true"?id="mymodal-link">
????<div?class="modal-dialog">
???? <div?class="modal-content">
<div?class="modal-header">
<button?type="button"?class="close"?data-dismiss="modal"><span?aria-hidden="true">×</span><span?class="sr-only">Close</span></button>
<h4?class="modal-title">模態(tài)彈出窗標題</h4>
</div>
<div?class="modal-body">
<p>模態(tài)彈出窗主體內(nèi)容</p>
</div>
<div?class="modal-footer">
<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關(guān)閉</button>
<button?type="button"?class="btn?btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!--?data-target觸發(fā)模態(tài)彈出窗元素?-->
<button?class="btn?btn-primary"?type="button"?data-toggle="modal"?data-target="#mymodal-data">通過data-target觸發(fā)</button>
<!--?模態(tài)彈出窗內(nèi)容?-->
<div?class="modal"?id="mymodal-data"?tabindex="-1"?role="dialog"?aria-labelledby="mySmallModalLabel"?aria-hidden="true">
<div?class="modal-dialog">
<div?class="modal-content">
<div?class="modal-header">
<button?type="button"?class="close"?data-dismiss="modal"><span?aria-hidden="true">×</span><span?class="sr-only">Close</span></button>
<h4?class="modal-title">模態(tài)彈出窗標題</h4>
</div>
<div?class="modal-body">
<p>模態(tài)彈出窗主體內(nèi)容</p>
</div>
<div?class="modal-footer">
<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關(guān)閉</button>
<button?type="button"?class="btn?btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>?
</body>
</html>
2017-09-08
把<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 中引入的網(wǎng)址maxcdn.bootstrapcdn.com換成libs.baidu.com就行了,其他的不用改。即用<script?src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>?
2017-08-11
?以上回答都不對,經(jīng)過我多次測試,終于找到了解決辦法。主要原因是,引入的css和js庫都不匹配。解決方法如下:
1,<link>標簽用這一條:
<link rel="stylesheet" href="
2,<script>標簽用下面兩條:
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>?
2016-12-08
引用路徑少了http:
2016-12-05
按F12 看看控制臺有沒有報錯。