Question

这是显示模态的按钮：

<li><a href="#" class="hvr-bounce-to-right" data-target="#PrctcSched" data-toggle="modal" aria-haspopup="true" aria-expanded="false">Practice Schedule</a></li>

当我按下练习计划按钮时，背景淡出但模态窗口没有显示。

这是模态代码。你能否在这里看到我的代码有什么问题？

<!-- Modal Practice Schedule Block Begin -->
<div class="modal" id="PrctcSched" tabindex="-1" role="dialog" aria-labelledby="lblPrctcHdr" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <!-- Modal Header -->
            <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="lblPrctcHdr">
                    My Availability
                </h4>
            </div>

            <!-- Modal Body Block Begin -->
            <div class="modal-body">

                <form class="form-horizontal" role="form" action="#" method="POST">

                  <div class="form-group">
          <div class="col-sm-10">
            <input type="checkbox" class="form-control" name="chbxDt1" Id="chbxDt1" value="chbxDt1chkd" class="col-sm-2 control-label">
            <label for="chbxDt1">1</label>
                    </div>
                  </div>

          <div class="form-group">
          <div class="col-sm-10">
            <input type="checkbox" class="form-control" name="chbxDt2" Id="chbxDt2" value="chbxDt2chkd" class="col-sm-2 control-label">
            <label for="chbxDt2">2</label>
                    </div>
                  </div>

          <div class="form-group">
          <div class="col-sm-10">
            <input type="checkbox" class="form-control" name="chbxDt3" Id="chbxDt3" value="chbxDt3chkd" class="col-sm-2 control-label">
            <label for="chbxDt3">3</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Update My Availability</button>
                    </div>
                  </div>
                </form>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
                </div>

            </div>
      <!-- Modal Body Block End -->



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

Answer 1

我只是把你的代码放到我正在处理的页面中，它运行正常。你可以添加“淡入淡出”类来确保模态淡入而不是仅仅出现，但链接触发了我的模态。

<div class="modal fade" id="PrctcSched"...

检查你的bootstrap版本，确保你的文档头中有jquery，bootstrap.js和bootstrap.css。

莫代尔窗口不显示但背景淡出

1 个答案: