我正在开发Flask Web应用程序,并且需要使用引导程序模式设置场景。我需要根据用户检查的单选按钮打开模式。我的用户将选中一个单选按钮,然后单击“确定”,我需要弹出特定的模式。我该如何处理?我暂时使用了data-target
。
我的html代码:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="modalchoix" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
</div>
<div class="modal-body">
<input type="radio" id="referentiel" name="choixmaj" value="referentiel">
<label for="referentiel"> CHOIX A</label><br>
<input type="radio" id="transco" name="choixmaj" value="transco">
<label for="transco"> CHOIX B</label><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalrefmodeles">OK</button>
</div>
</div>
</div>
</div>
</div>
谢谢
您可以用Javascript
做
document.querySelectorAll('input[name="radio"]').forEach(cur => {
cur.addEventListener('change', e => {
const value = document.querySelector('input[name="radio"]:checked').value;
if (value === 'yes') {
document.querySelector('#reactAccRadio').setAttribute('data-target', '#yesModal');
} else if (value === 'no') {
document.querySelector('#reactAccRadio').setAttribute('data-target', '#noModal');
}
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<form id="formSubmit" action="#" method="POST">
<div class="form-group">
<input type="radio" name="radio" value="yes" checked> Open Yes Modal
<input type="radio" name="radio" value="no"> Open No Modal
</div>
<button id="reactAccRadio" type="button" class="btn btn-primary" data-toggle="modal" data-target="#yesModal">Submit</button>
</form>
<!-- Modal -->
<div class="modal fade" id="yesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">If yes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="noModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">If no</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>