顯示與訊息相同頁面的 div

這是一個示例程式碼，它將向你展示如何建立動態程式碼，該程式碼將在執行時生成引導模型。這還包括在頁尾中決定模態標題正文內容和按鈕。

HTML 程式碼

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>

<!--  This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
  <div id="simple-div">
    <h1>This is H1 Heading</h1>
    This is most simple coding
    <br>
    <button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
    <button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
  </div>
  <div class="container-fluid" id="complex-div">
    <h2>Panels with Contextual Classes</h2>
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">Panel with panel-default class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-primary">
        <div class="panel-heading">Panel with panel-primary class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-success">
        <div class="panel-heading">Panel with panel-success class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-info">
        <div class="panel-heading">Panel with panel-info class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-warning">
        <div class="panel-heading">Panel with panel-warning class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-danger">
        <div class="panel-heading">Panel with panel-danger class</div>
        <div class="panel-body">Panel Content</div>
      </div>
    </div>
  </div>
</div>

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>

JQuery/Javascript

function simpleSHow(title)
{
    var msg=$('#simple-div');
    
    BootstrapDialog.show({
        title : title,
        message: $('#simple-div'),
        onhide : function(){
            $('#hidden-div').append(msg);
        }
    });
}

function complexSHow(title)
{
    var msg=$('#complex-div');
    
    BootstrapDialog.show({
        title : title,
        message: $('#complex-div'),
        onhide : function(){
            $('#hidden-div').append(msg);
        }
    });
}

程式碼說明

HTML 結構：

<div>(id=hidden-div)(always hidden)
 |
 |---- <div>(id=simple-div)
 |  |
 |  |---- content within this div 
 |
 |---- <div>(id=complex-div)
 |  |
 |  |---- content within this div 

這裡 div 與 id“hidden-div”是一個容器 div，我的意思是它包含不同的 div 以不同的模態顯示。並且其中的所有子 div 可以一次顯示給一個或多個模型。

Javascript 程式碼說明：

在呼叫函式時，我們將要顯示的 div 複製到最後要使用的變數。之後我們呼叫基本語法來動態建立 bootstrap 模式，其中作為一個訊息，我們直接給出我們想要顯示的 div 的引用。

這將從 hidden-div 中獲取 div，我的意思是我們想要顯示的 div 將從容器 div 中刪除，這就是我們將它的副本儲存到 msg 變數的原因。當彈出視窗關閉時，我們會將該 div 新增回容器 div，就像我們需要再顯示該模態一樣，然後我們將使該 div 可用於下次顯示。如果我們不在開頭複製並將其新增回來，那麼下次當我們想要顯示該模態而不重新整理頁面時，我們將不會在容器 div 中存在該 div。

上面給出了一個簡單的例子，可以在一個單獨的 html 頁面中顯示多個 bootstrap div，甚至沒有編寫單個傳統行來顯示模型。