通过 select 选项启用模式(Bootstrap 版本 3.3.6)?
Enabling modal (Bootstrap version 3.3.6) through select option?
示例:当我select选项"volvo"时,模态出现。
模态显示不正确。
<label>Recinto</label>
<select class="form-control" data-toggle="modal" data-target="#cria-recinto">
<option data-toggle="modal" data-target="#cria-recinto">O meu coliseu</option>
<option>volvo</option>
<option>A minha arena</option>
<option>a garagem da minha vizinha</option>
<option>Na esquina</option>
</select>
<script type="text/javascript">
$('select').change(function () {
if ($(this).val() == "volvo") {
$('#cria-recinto').modal('show');
}
});
</script>
这可能对您有所帮助
HTML
<label>Recinto</label>
<select class="form-control">
<option>O meu coliseu</option>
<option>volvo</option>
<option>A minha arena</option>
<option>a garagem da minha vizinha</option>
<option>Na esquina</option>
</select>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Show what you want
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JavaScript
$(document).ready(function() {
$('select').change(function() {
if ($(this).val() == "volvo") {
$('#myModal').modal('show');
}
});
});
示例:当我select选项"volvo"时,模态出现。 模态显示不正确。
<label>Recinto</label>
<select class="form-control" data-toggle="modal" data-target="#cria-recinto">
<option data-toggle="modal" data-target="#cria-recinto">O meu coliseu</option>
<option>volvo</option>
<option>A minha arena</option>
<option>a garagem da minha vizinha</option>
<option>Na esquina</option>
</select>
<script type="text/javascript">
$('select').change(function () {
if ($(this).val() == "volvo") {
$('#cria-recinto').modal('show');
}
});
</script>
这可能对您有所帮助
HTML
<label>Recinto</label>
<select class="form-control">
<option>O meu coliseu</option>
<option>volvo</option>
<option>A minha arena</option>
<option>a garagem da minha vizinha</option>
<option>Na esquina</option>
</select>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Show what you want
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JavaScript
$(document).ready(function() {
$('select').change(function() {
if ($(this).val() == "volvo") {
$('#myModal').modal('show');
}
});
});