我使用 Bootstrap 模式和全日歷。當我單擊打開模式的一天時。
在表單中,我有下拉選擇默認打開的選項。當我選擇一個選項時,它不會關閉。
我認為這modal show與select show功能沖突。當我檢查并檢查問題display: block的.show .dropdown-menu 解決時,但它是暫時的。
$('#select-modal').modal('show');
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="modal fade" id="select-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="title" id="largeModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="select-from">
<div class="col-lg-4 col-md-4 col-sm-8">
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-simple btn-round waves-effect" data-dismiss="modal">CLOSE</button>
<button type="button" class="btn mid-pink btn-round waves-effect">SAVE CHANGES</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
uj5u.com熱心網友回復:
最后,我解決了這個問題。問題出.dropdown-menu在display: block.
在dayClick我添加此代碼:
$('#select-modal').modal('show');
$('.dropdown-menu').addClass('d-none');
現在它正在作業。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/429648.html
