我需要在另一个模式上打开一个模式，问题是第一个模式在关闭了其上的模式后会丢失主页的scrool栏。
我会尽力解释：
我有这个模式，可以在模式主体中加载来自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动作加载要在模式主体中显示的信息：
$(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上比Modal滑倒了很多，但没有找到任何使用Jquery（Ajax）的东西，并且该modal内容足够大，可以滚动页面并且受modal上部影响
答案 0 :(得分：0)
https://dotnetfiddle.net/2q6mp1您可以在PHP中执行此操作。
这就是您的视图。我在上面添加了.NET Fiddle链接。
<!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>