HTML5彈窗代碼CSDN
HTML5為我們提供了許多強大的工具，使得我們能夠創建出功能強大的web應用程序。其中一個非常實用的工具就是彈窗窗口。在這篇文章中，我們將通過一個HTML5彈窗代碼示例展示如何在我們的網頁中創建彈窗窗口。
首先，讓我們創建一個HTML文檔并引入所需的樣式和腳本文件。這里我們將使用Bootstrap以及jQuery庫。下面是首部代碼的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML5彈窗代碼示例</title>
<link rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>HTML5彈窗代碼示例</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打開彈窗窗口</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">彈窗窗口標題</h4>
</div>
<div class="modal-body">
<p>這里是彈窗窗口的內容。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>