2016-08-24 774 views
0

我的引导模式显示不正确。它被延伸到整页。即时通讯使用HTML页面。看起来模式不是内联的,但我也认为我的代码是正确的。我希望有人能帮帮忙。感谢Bootstrap Modal正在全屏显示

<!-- MODAL SECTION --> 
<div class="modal fade" id="myModal"> 
    <div class="model-dialog"> 
     <div class="model-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i> Subscribe to our Newsletter</h4> 
      </div><!-- modal header --> 

      <div class="modal-body"> 
       <p>Simply enter your name and email! To receive our <em>Newsletter</em></p> 
       <form class="form-inline" role="form"> 
        <div class="form-group"> 
         <label class="sr-only" for="subscribe-name">Your First Name</label> 
         <input type="text" class="form-control" id="subscribe-name" placeholder="Your first name"> 
        </div><!-- form-group --> 
        <div class="form-group"> 
         <label class="sr-only" for="subscribe-email">and your email</label> 
         <input type="text" class="form-control" id="subscribe-email" placeholder="and your email"> 
        </div><!-- form-group --> 
        <input type="submit" class="btn btn-danger" value="Subscribe!"> 
       </form> 

       <hr> 

       <p><small>By providing your email you consent to receiving our newsletters. <br>No Spam. Just good stuff. We respect your privacy &amp; you may unsubscribe at any time.</small></p> 
      </div><!-- modal body --> 

     </div><!-- modal-content --> 
    </div><!-- modal-dialog --> 
</div><!-- modal --> 
+0

'模型dialog'&'模型content'拼写错误(和错误的顺序):这是_modal - * _。看到[modals](https://getbootstrap.com/javascript/#modals) – vanburen

回答

0
<div class="model-dialog"> 
     <div class="model-content"> 

应该是:

<div class="modal-dialog"> 
     <div class="modal-content"> 
+0

我的天啊:)这么多代码和我浪费了几个小时来解决问题。非常非常感谢你。现在所有人都在工作。祝你有个美好的一天,并感谢你。 –