一つのモーダルが開いていると、他のは、灰色の画面になります

Question

I持っている同じページ上の2個の異なるモーダルを開き、次の2つのボタン：

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

SECOND MODALが現れ決して ：

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

まあが、物事がある：

には、以下のモーダルを開きます！

最初のモーダルは正しく開きますが、ボタンをクリックして2番目のモーダルを開くと、グレーの画面が開き、ページを更新しない限り、私はそれを抜け出せません。

私はポルトガル語で書かれたテキストをいくつか知っていますが、問題はありません。

誰かが何が起こっているか教えてもらえますか？ありがとう！

Answer 1

あなたの構文はビットが台無しであるここで働いコード更新され、：

<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