模态页脚不起作用

时间:2015-12-26 14:25:34

标签: javascript html5 twitter-bootstrap modal-dialog

在下面的代码中,未显示模式页脚。它显示页脚的关闭按钮,但它在模态外部。不知道为什么会这样。模态正文显示但不是模态页脚,并且在模态标题后显示额外的行。有人能帮助我吗?

     echo "<button class='btn btn-primary btn-lg' data-toggle='modal' data-  
     target='#myModal' style='margin-top:230px;margin-  
      left:10px;'>Appointment</button>";

      echo "<div class='modal fade' id='myModal' tabindex='-1' role='dialog'   
      aria-labelledby='myModalLabel' aria-hidden='true'>";
      echo "<div class='modal-dialog'>";
      echo "<div class='modal-content'>";
      echo "<div class='modal-header'>";
      echo "<button type='button' class='close' data-dismiss='modal' aria-  
      hidden='true'>&times;</button>";
      echo "<h4 class='modal-title' id='myModalLabel'>Book    
      Appointment</h4>";

       echo "</div>";
       echo "<div class='modal-body'>";
       echo "<div class='col-md-8'>";
       echo "<div class='row'>";
       echo "<label for='idTourDateDetails'>Date and Time</label>";
       echo "<div class='form-group'>";
       echo "<div class='input-group'>";
       echo "<input type='text' name='idTourDateDetails' id='idTourD  
       ateDetails' readonly='readonly' class='form-control clsDatePicker'> 
      <span class='input-group-addon'><i id='calIconTourDateDetails' 
      class='glyphicon glyphicon-th'></i></span>";

      echo "</div>";

        echo "</div>";
        echo "</div>";
         echo "</div>";

       echo "<div class='modal-footer'>";
       echo "<button type='button' class='btn btn-default' data-
       dismiss='modal'>Close</button>";
       echo "</div>";
       echo "</div>";
       echo "</div>";
       echo "</div>";           
       echo "</div>";

1 个答案:

答案 0 :(得分:0)

这应该解决它(div标签问题)

&#13;
&#13;
#myModal{
  border:solid black;
}
&#13;
<button class='btn btn-primary btn-lg' data-toggle='modal' data-  
     target='#myModal' style='margin-top:230px;margin-  
      left:10px;'>Appointment</button>
<div class='modal fade' id='myModal' tabindex='-1' role='dialog'   
      aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
  <div class='modal-content'>
    <div class='modal-header'>
      <button type='button' class='close' data-dismiss='modal' aria-  
      hidden='true'>&times;</button>
      <h4 class='modal-title' id='myModalLabel'>Book    
      Appointment</h4>
    </div>
    <div class='modal-body'>
      <div class='col-md-8'>
        <div class='row'>
          <label for='idTourDateDetails'>Date and Time</label>
          <div class='form-group'>
            <div class='input-group'>
              <input type='text' name='idTourDateDetails' id='idTourD  
       ateDetails' readonly='readonly' class='form-control clsDatePicker'> 
              <span class='input-group-addon'><i id='calIconTourDateDetails' 
      class='glyphicon glyphicon-th'></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='modal-footer'>
      <button type='button' class='btn btn-default' data-
       dismiss='modal'>Close</button>
    </div>
  </div>
</div>
</div>
&#13;
&#13;
&#13;