模式窗口不显示,但背景淡出


Modal Window Not Showing Up But Background Fades out

这是打开模式的按钮:

<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>

我只是把你的代码放在我正在处理的页面中,它运行得很好。你可以向它添加"fade"类,以确保模态淡入而不仅仅是出现,但链接为我触发了模态。

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

检查您的引导程序版本,并确保您的文档头中有jquery、bootstrap.js和bootstrap.css。