程式碼：以 bootstrap 4.3.1 為例，基本上紅色字為必要固定程式碼。
<html> <head> <meta charset="utf-8"> <title>HTML 使用 bootstrap 4.3.1 創建 Web 頁面彈出彈框訊息的模態框 (Modal)</title> <link href="css/bootstrap 4.3.1.min.css" rel="stylesheet">
<script src="js/jquery-3.4.1.min.js"></script> <script src="js/bootstrap 4.3.1.min.js"></script>
</head> <body>
<!-- 按鈕或連結來觸動模態框 -->
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">按我展示 Modal</button>
<!-- Modal 本體 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal 頭部 -->
<div class="modal-header">
<h4 class="modal-title">Modal 標題位置</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div> <!-- Modal 身部 -->
<div class="modal-body">
Modal 內容文本位置...
</div>
<!-- Modal 底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
</body>
</html>
以上模態框 (Modal)的頁寛為預設值，若要更改寛度，則在 Modal 本體第二行< div class="modal-dialog"> 加入大Modal參數 modal-lg 或小Modal參數 modal-sm 。若要依所需改變頁寛，則加 style="max-width: xx" 如下：
小 Modal <div class="modal-dialog modal-sm"> 大 Modal <div class="modal-dialog modal-lg"> 或依所需改變寛度 <div class="modal-dialog" style="max-width: 80%"> 或 <div class="modal-dialog" style="max-width: 600px">