只有一个自举模态开放 - 其他模式开启但模态不会出现

Question

似乎弹出一个给定页面上唯一的一个模态。定义的第一个模态似乎是唯一打开的模态。如果我改变了模态定义的顺序，那么新的＆＃34;第一个＆＃34;模态有效，但其他人不胜。关于为什么会出现这种情况的任何线索？

模式：

<!-- Modal for Add Budget Transaction -->
{% include 'modals/add_budget_modal - addBudgetOriginal.html' %}
{% include 'modals/add_budget_modal - addBudge.html' %}

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

在我的HTML页面的底部定义模式：

<div id="addBudgetOriginal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

这两个包含块的模态具有以下定义：

<div id="addBudget" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

和

Display: Inline-Block

在这个例子中，只有带有＆＃34; #addBudgetOriginal＆＃34;的模态。标签会弹出并打开，因为首先定义了这个模态。其他模态不会打开。任何线索为什么？感谢。

Answer 1

你想做类似的事情，如下面的模式所示。 如果答案是肯定的，那么请查看this link。它将向您展示如何轻松创建模态，而且无需编写任何传统代码。

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);
					}
				});
			}
			
			function showDiv1(div_id)
			{
				var msg=$('#lavel-2_div-1');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-1'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv2(div_id)
			{
				var msg=$('#lavel-2_div-2');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-2'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv3(div_id)
			{
				var msg=$('#lavel-2_div-3');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-3'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv4(div_id)
			{
				var msg=$('#lavel-2_div-4');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-4'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}

<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 id="lavel-2_div-1">
    <h3>This is Level 2 Header</h3>
    <span style="color : blue;">This is Level 2 Message 1</span>
  </div>

  <div id="lavel-2_div-2">
    <h3>This is Level 2 Header</h3>
    <span style="color : greenyellow;">This is Level 2 Message 2</span>
  </div>

  <div id="lavel-2_div-3">
    <h3>This is Level 2 Header</h3>
    <span style="color : pink;">This is Level 2 Message 3</span>
  </div>
  <div id="lavel-2_div-4">
    <h3>This is Level 2 Header</h3>
    <span style="color : green;">This is Level 2 Message 4</span>
  </div>

  <div class="container-fluid" id="complex-div">

    <button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
    <button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
    <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>