引导模式 - 元素里面没有身模式

Question

我有模态对话框（与按下按钮打开）这是我看这个：

我不明白为什么模态对话框之外的输入？

例子是here

代码：

<style> 
    #myModal .modal-dialog { width: 95%; } 
</style> 

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

<!-- Modal --> 
<div id="myModal" class="modal fade" 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"> 

     <input type="text" class="col-sm-8"> 

     <label class="col-sm-4">Datum ponudbe:</label> 
     <input type="text" class="col-sm-8"> 

     <label class="col-sm-4">Dokument velja do:</label> 
     <input type="text" class="col-sm-8"> 


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

    </div> 

    </div> 
</div> 

Answer 1

你举的例子和链接不包含相同的代码。这里的代码缺少form-groups和modal-body样式。 链接应该工作 - 它只是拉错了id（#myModal）。将数据目标更改为#modalOffer，它可以工作。

<style> 
#myModal .modal-dialog { width: 95%; } 
</style> 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalOffer">Open Modal</button> 

<!-- Modal --> 
<div id="modalOffer" class="modal fade" 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" style="overflow:hidden;height:1%;"> 

    <div class="form-group col-sm-12"> 
    <label class="col-sm-2">Kraj:</label> 
    <input type="text" class="col-sm-3"> 
    </div> 

    <div class="form-group col-sm-12"> 
    <label class="col-sm-2">Datum ponudbe:</label> 
    <input id="inputDateOffer" type="text" class="col-sm-3"> 
    </div> 

    <div class="form-group col-sm-12"> 
    <label class="col-sm-2">Dokument velja do:</label> 
    <input id="inputDokumentValidTo" type="text" class="col-sm-3"> 
    </div> 


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

</div> 

</div> 
</div>