Bootstrap Modal在单击时未打开(触发) [英] Bootstrap Modal not opening (trigger) on click

问题描述

我对模态有一些疑问.我进行了很多搜索，发现与data-target="#panel-modal2"类似的问题，其中没有#，但我的情况似乎还可以.有什么帮助吗?

I have some issues with a modal that i have. I searched a lot, i found some similar issues with data-target="#panel-modal2" where there was no #, but mine seems O.K. Any help?

这是我的HTML:

<div class="btn-group">
  <a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>
</div><!--.btn-group-->


<div class="modal modal-nutrition fade full-height from-right" id="panel-modal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="row">
          <div class="col-md-12">
            <h4 class="modal-title">Transfer</h4>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="row">

          </div>
          <div class="row margin-top-30">
            <div class="col-md-3">To:</div>
            <div class="col-md-9">
              <select class="selectpicker" data-width="100%">
                <option>- Select -</option>

              </select>
            </div>
          </div>
          <div class="row margin-top-30">
            <div class="col-md-3">Date:</div>
            <div class="col-md-9">
              <div class="control-group">
                <div class="controls">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                    <div class="inputer">
                      <div class="input-wrapper">
                        <input type="text" style="width: 200px" name="transferDate" class="form-control bootstrap-daterangepicker-basic" value="03/18/2013" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="note note-info note-left-striped">

            </div><!--.note-->
          </div><!--.col-md-12-->
        </div><!--.row-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-flat-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-flat-primary" data-dismiss="modal">Submit</button>
      </div>
    </div>
  </div>

推荐答案

尝试一下

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group">
                                    <a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>
                                </div><!--.btn-group-->


<div class="modal modal-nutrition fade full-height from-right" id="panel-modal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <div class="row">
                <div class="col-md-12">
                    <h4 class="modal-title">Transfer</h4>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">From:</div>
                    <div class="col-md-9">Nursery</div>
                </div>
                <div class="row margin-top-30">
                    <div class="col-md-3">To:</div>
                    <div class="col-md-9">
                        <select class="selectpicker" data-width="100%">
                            <option>- Select -</option>
                            <option>Nursery</option>
                            <option>Toddlers</option>
                            <option>Other kindergarten</option>
                        </select>
                    </div>
                </div>
                <div class="row margin-top-30">
                    <div class="col-md-3">Date:</div>
                    <div class="col-md-9">
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                                    <div class="inputer">
                                        <div class="input-wrapper">
                                            <input type="text" style="width: 200px" name="transferDate" class="form-control bootstrap-daterangepicker-basic" value="03/18/2013" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="note note-info note-left-striped">
                        <h4>Active Transfer</h4>
                        <p>This person will transfer to Nursery on 14.05.2016</p>
                        <p>If you submit a new transfer the active one will be overwrited.</p>
                    </div><!--.note-->
                </div><!--.col-md-12-->
            </div><!--.row-->
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-flat-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-flat-primary" data-dismiss="modal">Submit</button>
        </div>
    </div>
</div>

这篇关于Bootstrap Modal在单击时未打开(触发)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！