Bootstrap Modal Not Opening (trigger) On Click

August 20, 2022 Post a Comment

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

Solution 1:

Try adding bootstrap.js in your script tag. Also add jquery.js before the bootstrap.js

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>

Solution 2:

Please add default jquery and boostrap js your modal popup will work fine. Please check below snippet for more understanding.

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

Solution 3:

It's probably because you're using a too old or too new version of jquery for bootstrap v3.x.x requirements. Check that your jquery version (max) is 2.2.4, because your code is fine, there's nothing wrong with it.

Baca Juga

Solution 4:

Try this

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

Solution 5:

For elements, omit data-target, and use href="#modalID" instead;

javascript edu