Heim >Web-Frontend >CSS-Tutorial >Code-Implementierung der dynamischen Modalbox und der statischen Modalbox in BootStrap
Code-Implementierung der dynamischen Modalbox und der statischen Modalbox in BootStrap
- 不言Original
- 2018-08-13 10:00:462050Durchsuche
In diesem Artikel geht es um die Code-Implementierung von dynamischen Modalboxen und statischen Modalboxen in BootStrap. Ich hoffe, dass er für Sie hilfreich ist.
Um das BootStrap-Framework zu verwenden, müssen Sie seine Klasse überladen, was bedeutet, dass die Klasse dieselbe sein muss
Der Code lautet wie folgt:
Dynamische Modalbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<script src="bootstrap-3.3.7/js/jquery.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.7/js/docs.min.js"></script>
</head>
<body>
<div>
<div>
<div>bootstrap框架 <small>s</small>
</div>
</div>
<!-- 动态框 -->
<div>
<!-- modal默认是隐藏的 -->
<div>
<div>
<!-- 头部关闭按钮 -->
<div>
<button type="button" class="close myclose" data-dismiss="modal"><span >×</span></button>
<div class="h3 modal-title">标题部分</div>
<!-- 内容部分 -->
<div>
<P>这是内容部分</P>
</div>
<!-- 页脚 -->
<div>
<button type="button" class="btn btn-primary myclose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning myclose">save</button>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="btn btn-success" id="show">显示对话框</a>
</div>
</body>
</html>
<script>
$(function(){
$('#show').click(function(){
$('.modal').modal('show')
})
})
</script> Statische modale Box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<script src="bootstrap-3.3.7/js/jquery.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.7/js/docs.min.js"></script>
</head>
<body>
<div>
<div>
<div>bootstrap框架 <small>s</small>
</div>
<!-- 静态模态框 官方有一个bug就是在写静态框的时候在按钮上要绑定同一个class-->
<div>
<div>
<div>
<button type="button" class="close myclose" data-dismiss="modal">
<span>×</span>
</button>
<h3>Model标题</h3>
</div>
<!-- body部分 -->
<div>
<p>这是身体部分</p>
</div>
<!-- footer部分 -->
<div>
<button class="btn btn-info myclose" data-dismiss="modal">close</button>
<button class="btn btn-primary myclose">save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
$('.myclose').click(function(){
$('.modal-dialog').css('display','none')
})
})
</script>Verwandte Empfehlungen:
Wie werden Tabellen in HTML erstellt? (Codebeispiel)
Kombinieren von 2D und 3D in HTML und CSS3, um Animationseffekte zu erzielen
Verschiedene Verwendungen von select in HTML Zusammenfassung (Code)
Das obige ist der detaillierte Inhalt vonCode-Implementierung der dynamischen Modalbox und der statischen Modalbox in BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!