Bootstrap：模态对齐问题，点击时没有过渡效果

时间：2017-06-27 14:55:08

标签： html css modal-dialog bootstrap-modal

我创建了一个简单的模态，但是当我单击按钮时，模态出现在页面的最顶部，当模态出现时，动画中没有淡入淡出。模式背后没有背景，也涵盖整个Web应用程序。我设置了正确的课程，但仍然没有运气。

这是我的按钮：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
    Add Function
</button>

模态本身：

<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">X</button>
            <h1>Lab 6</h1>
        </div>
        <div class="modal-body">


            <div class="row">

                <div class="col-md-12">

                    <div class="panel panel-default">
                        <div class="panel-heading" style="background-color: #e0e9f5">
                            <h2 class="panel-title">Employee Function - Add</h2>
                        </div>

                        <div class="panel-body">

                            <div class="well">
                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>
                                            <span style="color: red">* </span>Code:
                                        </h5>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>
                                            <span style="color: red">* </span>Description:
                                        </h5>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>Legacy Function Code:</h5>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>Active?</h5>
                                    </div>


                                    <div class="col-md-1">

                                        <input type="radio">
                                        <h5>Yes</h5>

                                    </div>

                                    <div class="col-md-2">

                                        <input type="radio">
                                        <h5>No</h5>

                                    </div>

                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-6" align="right">
                                        <button type="button" class="btn btn-info btn-lg">Save</button>
                                    </div>
                                    <div class="col-md-6" align="left">
                                        <button type="button" class="btn btn-warning btn-lg"
                                            data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

以下是我想要实现的一个例子： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

感谢任何帮助。谢谢。

1 个答案:

答案 0 :(得分：1)

我相信你只是忘了添加boostrap CSS + JS或jQuery。下面是一个代码片段，包含您的确切代码，但包含了boostrap CSS + JS和jQuery。请注意，jQuery必须在boostrap JS链接之前，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

所有这些都应该放在<head>标记中（或<body>标记的底部）

<!-- Stuff for the <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- end <head> tag -->
<!-- Stuff for the <body> -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
    Add Function
</button>
<div class="modal fade" id="addModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Lab 6</h1>
      </div>
      <div class="modal-body">


        <div class="row">

          <div class="col-md-12">

            <div class="panel panel-default">
              <div class="panel-heading" style="background-color: #e0e9f5">
                <h2 class="panel-title">Employee Function - Add</h2>
              </div>

              <div class="panel-body">

                <div class="well">
                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>
                        <span style="color: red">* </span>Code:
                      </h5>
                    </div>
                    <div class="col-md-4">
                      <input type="text" class="form-control">
                    </div>
                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>
                        <span style="color: red">* </span>Description:
                      </h5>
                    </div>
                    <div class="col-md-6">
                      <input type="text" class="form-control">
                    </div>
                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>Legacy Function Code:</h5>
                    </div>
                    <div class="col-md-4">
                      <input type="text" class="form-control">
                    </div>
                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>Active?</h5>
                    </div>


                    <div class="col-md-1">

                      <input type="radio">
                      <h5>Yes</h5>

                    </div>

                    <div class="col-md-2">

                      <input type="radio">
                      <h5>No</h5>

                    </div>

                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-6" align="right">
                      <button type="button" class="btn btn-info btn-lg">Save</button>
                    </div>
                    <div class="col-md-6" align="left">
                      <button type="button" class="btn btn-warning btn-lg" data-dismiss="modal">Cancel</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

P.S。在运行之前展开代码段时，结果看起来会更好，因为否则输出的宽度很小会使事情变得混乱（这可能是小型设备上的问题）

相关问题
最新问题