一個模態打開和其他給出灰色屏幕

我有以下兩個按鈕，這將打開在同一頁上的兩個不同模態：一個模態打開和其他給出灰色屏幕

<button class = "btn btn-primary" style = "float: left; margin-left: 15px" name = "btnDetalhes" data-toggle = "modal" data-target = "#myModal">Detalhes</button>

打開以下模式：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Detalhes da Conta</h4> 
    </div> 

    <div class="modal-body" style = "height: 195px"> 

    <table class = "table table-bordered table-striped" id = "tabelaDetalhes"> 
     <thead> 
      <tr> 
       <th width="15%">Horário Pedido</th> 
       <th width="45%">Nome do Produto</th> 
       <th width="30%">Preço (R$)</th> 
      </tr> 

     </thead> 

     <tbody id = "bodyTabelaDetalhes"> 

     </tbody> 
    </table> 

    </div> 
</div>

，這個按鈕：

<button onclick = "abrirModalDetalhes()" data-toggle = "modal" data-target = "#modalDetalhesPedido" class = "btn btn-primary">Detalhes</button>

打開下面的模式：

<div class="modal fade" id="modalDetalhesPedido" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog modal-lg" role="document"> 
<div class="modal-content" style = "height: 900px"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel" style = "font-weight: bold">Detalhes do Pedido (Nome do pedido)</h4> 
    </div> 

    <div class="modal-body" style = "height: 195px"> 

     <p>Test</p> 

    </div> 
</div>

好了，這個事情是：第二MODAL一直沒有出現！

第一個模式可以正確打開，但是當我點擊按鈕打開第二個模式時，它會打開一個灰色屏幕，除非刷新頁面，否則無法離開它。

我知道一些文本是葡萄牙文，但它沒有在問題上有所作爲。

有人能告訴我發生了什麼事嗎？謝謝！

來源

2016-09-06 Gabriel Augusto

'''abrirModalDetalhes（）'''這個方法調用發生衝突的模態調用。 – aavrug

你需要每個模態男子獨特的ID – madalinivascu

你的語法有點亂了，這裏更新工作代碼：

<button class = "btn btn-primary" style = "float: left; margin-left: 15px" name = "btnDetalhes" data-toggle = "modal" data-target = "#myModal">Detalhes</button> 
<button onclick = "abrirModalDetalhes()" data-toggle = "modal" data-target = "#modalDetalhesPedido" class = "btn btn-primary">Detalhes</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Detalhes da Conta</h4> 
     </div> 
     <div class="modal-body"> 
     <table class = "table table-bordered table-striped" id = "tabelaDetalhes"> 
     <thead> 
      <tr> 
       <th width="15%">Horário Pedido</th> 
       <th width="45%">Nome do Produto</th> 
       <th width="30%">Preço (R$)</th> 
      </tr> 

     </thead> 

     <tbody id = "bodyTabelaDetalhes"> 

     </tbody> 
    </table> 

     </div> 
    </div> 
    </div> 
</div> 

<!-- Modal --> 
<div class="modal fade" id="modalDetalhesPedido" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content" style = "height: 900px"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel" style = "font-weight: bold">Detalhes do Pedido (Nome do pedido)</h4> 
     </div> 
     <div class="modal-body" style = "height: 195px;"> 
     <p>Test</p> 
     </div> 
    </div> 
    </div> 
</div>

JSFiddle DEMO

來源

2016-09-06 04:24:05 NickyTheWrench

一個模態打開和其他給出灰色屏幕

回答

相關問題