2016-12-24 84 views
0

似乎只弹出给定页面上的一个模式。定义的第一个模式似乎是唯一打开的模式。如果我改变了模态定义的顺序,那么新的“第一”模式可以工作,但其他模式不能。任何线索,为什么这是这种情况?只有一个引导模式打开 - 其他模式打开 - 其他模式不显示

的模态:

<div class="flextable table-actions"> 
    <div class="flextable-item" style="padding-right:5px;"> 
    <div class="btn-toolbar-item input-with-icon"> 
     <button type="button" class="btn btn-xs btn-primary-outline" data-target="#addBudgetOriginal" data-toggle="modal">Original Budget</button> 
    </div> 
    </div> 
    <div class="flextable-item" style="padding-right:5px;"> 
    <div class="btn-toolbar-item input-with-icon"> 
     <button type="button" class="btn btn-xs btn-primary-outline" data-target="#myModal" data-toggle="modal">Approved Budget Change</button> 
    </div> 
    </div> 
    <div class="flextable-item" style="padding-right:5px;"> 
    <div class="btn-toolbar-item input-with-icon"> 
     <button type="button" class="btn btn-xs btn-primary-outline" data-target="#addBudget" data-toggle="modal">Budget Reallocation</button> 
    </div> 
    </div> 
    <div class="flextable-item flextable-primary"> 
    <div class="btn-toolbar-item input-with-icon"> 
     <button type="button" class="btn btn-xs btn-primary-outline" data-target="#addBudget" data-toggle="modal">Pending Budget Reduction</button> 
    </div> 
    </div> 

限定模态AT MY HTML页面的底部:

<!-- 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> 

两个包括块具有与以下定义模态:

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

AND

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

在这个例子中,只有带有“#addBudgetOriginal”标签的模式才会弹出并打开,因为这个模式是首先定义的。其他模态不会打开。任何线索为什么?谢谢。

回答

0

你想做类似于下面模式中所示的东西吗? 如果回答是肯定的,那么查看this link。它将向您演示如何轻松创建您的模态,并且无需编写任何常规代码。

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