显示与消息相同页面的 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，甚至没有编写单个传统行来显示模型。