我的模态有一些问题。我搜索了很多,发现了一些类似的问题data-target="#panel-modal2"
哪里没有#
,但我的似乎还可以有什么帮助吗?
这是我的 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>
尝试在脚本标记中添加 bootstrap.js 。还要在 bootstrap.js 之前添加 jquery.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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)