如何解决单击按钮时的引导模态需要完全重新加载模态窗口
我需要在单击按钮时完全重新加载模式窗口(在这里跨度) 现在单击是打开模式窗口和关闭模式窗口。
如果我使用此代码:
$('#youtubeModal').on('hidden.bs.modal',function (event) {
$('#youtubeModal').modal('toggle')
})
这只是重新打开模式窗口,但我需要完全重新加载。
我现在很严格:
- 我按下按钮。
- 显示的模态一切正常。
- 我按下按钮
- 隐藏的模式。
- 我按下按钮。
- 模式打开并再次加载ajax并正常工作。
我需要 删除4.和5。:
-
我按下按钮。
-
模态显示一切正常。
-
我按下按钮
-
模式重新打开并重新加载ajax即可正常工作。
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $('#youtubeModal').on('show.bs.modal',function (event) { let button = $(event.relatedTarget) // Button that triggered the modal let youtubeUrl = button.data('url') // Extract info from data-* attributes $.ajax({ url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',type: 'post',data: {youtubeUrl: youtubeUrl},success(response) { // Add response in Modal body $('.modal-body').html(response); //$('#exampleModal').html(response); // Display Modal //$('#exampleModal').modal('show'); } }); }); </script>
解决方法
看起来您需要一个自定义触发器并以编程方式进行 因为默认的BS数据切换触发器具有另一种逻辑
<span id="play-button" class="fa fa-play-circle play-button" data-url="watch?v=ik7ysDGWbcw" onclick="showYoutubeModal(this)">click me</span>
<div class="modal fade" id="youtubeModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var youtubeModal = $('#youtubeModal').modal({'show': false});
youtubeModal.on('show.bs.modal',function (event) {
let button = $(event.relatedTarget);
let youtubeUrl = button.data('url');
$.ajax({
url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',type: 'post',data: {youtubeUrl: youtubeUrl},success(response) {
// Add response in Modal body
$('.modal-body').html(response);
//$('#exampleModal').html(response);
// Display Modal
//$('#exampleModal').modal('show');
}
});
});
function showYoutubeModal(trigger) {
// here you can call modal function programmatically
// depending on your needs
youtubeModal.modal('show',$(trigger));
}
</script>
更多信息,请点击此处
How to pass parameters to modal when i call it programmatically?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。