2016-12-24 87 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>