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?
This is my 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>
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?
This is my 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>
7 Answers
Reset to default 5In my case, the solution was changing the buttons' attributes.
As you will see inside the HTML starter template example from Bootstrap's Website (https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop), the Modal buttons have attributes like:
- data-bs-toggle
- data-bs-toggle
If the attributes include -bs- in the middle, try removing it:
- data-toggle
- data-toggle
If they don't include it, then try including it.
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> 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>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.
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>For elements, omit data-target, and use href="#modalID" instead;
Change the button attribute from
data-toggle to data-bs-toggle and
data-target to data-bs-target
<a class="btn btn-red btn-ripple" data-toggle="modal" data-target="#panel-modal2">Transfer</a>, the modal didn't trigger – Michael Commons Commented Aug 30, 2016 at 10:45</div>tag at the end – Riaan van Zyl Commented Aug 30, 2016 at 10:48<div class="modal modal-nutrition fade full-height from-right"has not been closed – Riaan van Zyl Commented Aug 30, 2016 at 10:55