Modal on Modal with Jquery
Modal on Modal with Jquery
提问于 2019-01-01 03:43:16
我需要在另一个模式上打开一个模式，问题是第一个模式在关闭模式后失去了主页面的滚动条。
我会试着解释得更清楚：
我有这个modal，它在modal中加载一个内容，这个内容可以是来自Ajax中的查询的大量内容
<div class="modal fade" id="modal_1">
<div class="modal-dialog modal-lg" 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">Concluir </h4>
</div>
<div id="modal-body" class="modal-body"></div>
</div>
</div>
</div>我在下面的Jquery操作中加载了要在modal-body中显示的信息：
$(document).on('click', '#btn_open_modal1', function (event) {
event.preventDefault();
$.ajax ({
type: 'POST',
url: "load.php",
data: {id : id},
async: false,
dataType: "text",
success: function(data){
$('#modal-body').html(data);
$('#modal_1').modal('show');
}
})
})在此模式中，将打开的有一个按钮来调用另一个模式
<button class="btn btn-success btn-block" id="confirm">Confirm</button>在此模式中，将打开一个调用另一个模式的按钮，单击此按钮将启动一个新的Ajax调用，以打开新的模式
<div class="modal fade" id="modal_2">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-white bg-dark">Confirm: </div>
<button class="btn btn-secondary btn-no" data-dismiss="modal">No</button>
<a class="btn btn-primary text-white btn-yes" id="btn-yes">Yes</a>
</div>
</div>
</div>
</div> 在Jquery中
$(document).on('click', '#confirm', function(event){
event.preventDefault();
$("#modal_2").modal().find("#btn-yes").off('click').on("click", function(event){
event.preventDefault();
$.ajax ({
type: 'POST',
url: "update.php",
data: {id : id},
dataType: "text",
success: function(data){
$('#modal_2').modal('hide');
}
})
})
})在该模式中，将打开一个调用另一个模式的按钮，单击该按钮将启动一个新的Ajax调用，以打开一个新的模式。当我关闭modal_2时，modal_1会丢失scrool，并且不能再滚动页面。我忽略了很多关于Modal的内容，但我没有发现任何使用Jquery (Ajax)的东西，也没有发现任何使用Jquery(Ajax)的东西，也没有发现Modal的内容足够大，可以滚动页面，并且它受到modal上层的影响
回答 1
Stack Overflow用户
发布于 2019-01-01 04:39:33
你可以在https://dotnetfiddle.net/2q6mp1中做到这一点。
这就是您的视图的外观。我在上面添加了一个.NET小提琴链接。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut139</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_open_modal1").click(function () {
$('#exampleModal').modal('show');
})
$("#btn_open_modal2").click(function () {
$('#exampleModa2l').modal('show');
})
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button id="btn_open_modal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch outer modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="height:50px; overflow-y: scroll;">
...
does not lose its scroll
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="modal-footer">
<button id="btn_open_modal2" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch second modal
</button>
<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>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
Close this second modal and first modal, still has scroll capabilities
</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>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53990924
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号