Bootstrap: 在 Modal 中打开另一个 Modal

因此，我使用这段代码在当前打开的模式窗口中打开另一个模式窗口:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

发生的情况是，在大约500毫秒的时间内，滚动条将被复制。我猜是因为目前的模式还在淡出。然而，它看起来非常不顺利和结巴。

如果您能提出解决这个问题的建议，我将不胜感激。

另外，在 onclick-event 中构建这种方式是否不专业？

I'm working with the bootstrap version 3.0.

编辑: 我想有必要减少淡出模态的时间。这怎么可能呢？

471143 次浏览
小开
最佳答案

data-dismiss使当前模态窗口力关闭

data-toggle打开了一个包含 href内容的新模式

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

or

<a data-dismiss="modal" onclick="call the new div here">Click</a>

如果成功了请告诉我们。

小开

若要在当前打开的模式窗口中打开另一个模式窗口,
您可以使用 < a href = “ https://github.com/jschr/bootstrap-mode/”rel = “ norefrer”> bootstrap-mode

自举模式演示程序

小开

我的代码运行良好 使用数据-解散。

<li class="step1">
<a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
<p class="text-label">Step 1</p>
<p class="text-text">Plan your Regime</p>
</a>


</li>
<li class="step2">
<a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
<p class="text-label">Step 2</p>
<p class="text-text">Plan your menu</p>
</a>
</li>
<li class="step3 active">
<a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
<p class="text-label">Step 3</p>
<p class="text-text">This Step is Undone.</p>
</a>
</li>
小开

Twitter docs says custom code is required...

不需要额外的 JavaScript, 不过，我们强烈推荐自定义 CSS... ..。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    

<div class="modal-dialog">
          

<div class="modal-content  bg-info">
<div class="modal-header btn-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalOneLabel">modalOne</h4>
</div>
<div id="thismodalOne" class="modal-body bg-info">
                

                

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
Launch demo modal
</button>
             

<div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
<h3>EXAMPLE</h3>
</div>
</div>
<div class="modal-footer btn-info" id="woModalFoot">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Form Modals -->

小开

通过调用 hidden.bs.modal事件，可以实际检测到旧模式何时关闭:

    $('.yourButton').click(function(e){
e.preventDefault();


$('#yourFirstModal')
.modal('hide')
.on('hidden.bs.modal', function (e) {
$('#yourSecondModal').modal('show');


$(this).off('hidden.bs.modal'); // Remove the 'on' event binding
});


});

更多信息: http://getbootstrap.com/javascript/#modals-events

小开

Working on a project that has a lot of modals calling other modals and a few HTML guys that might not know to initiate it everytime for each button. 先绕了一大圈之后，不情愿地得出了与@gmaggio 相似的结论。

EDIT: Now supports modals called via javascript.

编辑: 从另一个模式打开一个滚动模式现在可以工作了。

$(document).on('show.bs.modal', function (event) {
if (!event.relatedTarget) {
$('.modal').not(event.target).modal('hide');
};
if ($(event.relatedTarget).parents('.modal').length > 0) {
$(event.relatedTarget).parents('.modal').modal('hide');
};
});


$(document).on('shown.bs.modal', function (event) {
if ($('body').hasClass('modal-open') == false) {
$('body').addClass('modal-open');
};
});

只要把模式调用按钮在正常情况下，如果它被捡起来是在一个模式，它将关闭当前的一个先打开指定的一个在数据目标。 请注意，relatedTarget是由 Bootstrap 提供的。

I also added the following to smooth out the fading a bit: 但我相信我们还可以做得更多。

.modal-backdrop.fade + .modal-backdrop.fade {
transition: opacity 0.40s linear 0s;
}
小开

我的解决方案并没有关闭较低的模态，而是真正地堆叠在它的顶部。它正确地保留了滚动行为。在 Bootstrap 3中测试。对于按预期堆栈的模态，您需要将它们在 HTML 标记中从最低到最高排序。

$(document).on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});

更新: 当你有堆叠的模态，所有的背景显示在最低的模态。你可以通过添加以下 CSS 来解决这个问题:

.modal-backdrop {
visibility: hidden !important;
}
.modal.in {
background-color: rgba(0,0,0,0.5);
}

这将给出一个模态背景下面的最高可见模态的外观。这样你的下半身会变得灰暗。

小开

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>






<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
      

<div class="modal-body">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	

</div>
</div>
</div>
</div>


<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
      

<div class="modal-body">
      	

content
      	

</div>
</div>
</div>
</div>
  



</body>
</html>

小开

我在使用可滚动的情态动词时也遇到了一些麻烦，所以我做了这样的事情:

  $('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
// BS adds some padding-right to acomodate the scrollbar at right
$('body').removeAttr('style');
})


$(".modal [data-toggle='modal']").click(function(){
$(this).closest(".modal").modal('hide');
});

It will serve for any 模态中的模态 that comes to appear. 注意，第一个是关闭的，所以第二个可以出现。 Bootstrap 结构没有变化。

小开

试试这个:

// Hide the login modal
$('#login').modal('hide');


// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

这个简单的黑客技术对我很有用。

小开

关闭第一个 Bootstrap 模式并动态打开新模式。

$('#Modal_One').modal('hide');
setTimeout(function () {
$('#Modal_New').modal({
backdrop: 'dynamic',
keyboard: true
});
}, 500);
小开

我走了一条完全不同的路线，我决定“去巢”他们。也许有人会发现这个方便..。

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.
小开

Modals in Modal:

$('.modal-child').on('show.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 0);
});
 

$('.modal-child').on('hidden.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 1);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>




<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
             

<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
<a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
</div>


</div>
</div>
</div>


<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header 1</h4>
</div>
<div class="modal-body">
<p>Two modal body…1</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>


</div>
</div>
</div>


<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
                

<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header 2</h4>
</div>
<div class="modal-body">
<p>Modal body…2</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>


</div>
</div>
</div>

小开

对于使用4号引导程序的人来说 Https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
$('.modal-backdrop:last').css('zIndex',1051+modal_lv);
$(e.currentTarget).css('zIndex',1052+modal_lv);
modal_lv++
});


$('.modal').on('hidden.bs.modal', function (e) {
modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
Launch demo modal a
</button>


<div class="modal fade" id="modal-a" 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">&times;</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
</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>


<div class="modal fade" id="modal-b" 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">&times;</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
</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>




<div class="modal" id="modal-c" 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">&times;</span>
</button>
</div>
<div class="modal-body">
<p class="my-3">That's all.</p>
</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>

小开 

$(document).on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});

小开

对于 bootstrap 4，为了扩展@helloroy 的回答，我使用了以下内容;-

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
if ( modal_lv > 0 )
{
$('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
$(e.target).css('zIndex',1051+modal_lv) ;
}
modal_lv++ ;
}).on('hidden.bs.modal', function() {
if ( modal_lv > 0 )
modal_lv-- ;
});

上述方法的优点是，当只有一个模式时，它不会产生任何效果，它只在多个模式中起作用。其次，它将处理工作委托给机构，以确保目前尚未生成的未来模式仍能得到满足。

更新

移动到一个 js/css 组合解决方案改善外观-褪色动画继续在背景上工作;-

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
if ( modal_lv > 0 )
$(e.target).css('zIndex',1051+modal_lv) ;
modal_lv++ ;
}).on('hidden.bs.modal', function() {
if ( modal_lv > 0 )
modal_lv-- ;
});

结合以下 css; -

.modal-backdrop ~ .modal-backdrop
{
z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
z-index : 1053 ;
}

This will handle modals nested up to 4 deep which is more than I need.

小开

Bootstrap 5(beta)-2021年更新

模态的默认 z-index 已经更改为1060。因此，要覆盖模态和背景使用..。

.modal:nth-of-type(even) {
z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1061 !important;
}

Bootstrap 5多模态

Bootstrap 4-2019年更新

我发现大多数答案似乎都有很多不必要的 jQuery。使用 Bootstrap 提供的事件(如 show.bs.modal)可以简单地从另一个模式打开一个模式。您可能还需要一些 CSS 来处理背景覆盖图。这里有三个“多模态”的场景..。

Open modal from another modal (keep 1st modal open)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>


<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
..
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>

在这种情况下，一个潜在的问题是来自第二个模式的背景隐藏了第一个模式。为了防止这种情况，使第二个模式 data-backdrop="static"，并添加一些 CSS 来修复背景的 z 索引..。

/* modal backdrop fix */
.modal:nth-of-type(even) {
z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1051 !important;
}

https://codeply.com/go/NiFzSCukVl

从另一个模式开放模式(关闭第一个模式)

这与上面的场景类似，但是因为我们在打开第二个模式时关闭了第一个模式，所以不需要背景 CSS 修复。一个处理第二模态 show.bs.modal事件的简单函数关闭第一模态。

$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});

https://codeply.com/go/ejaUJ4YANz

打开模式 在里面另一个模式

The last multiple modals scenario is opening the 2nd modal inside the 1st modal. In this case the markup for the 2nd is placed inside the 1st. No extra CSS or jQuery is needed.

<div class="modal" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>


<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</div>

Https://codeply.com/go/isbjqubiyn

小开

H Dog 给出的答案很棒，但这种方法实际上给了我一些 Internet Explorer 11闪烁。 Bootstrap 将首先隐藏模态，删除“ mode-open”类，然后(使用 H Dog 解决方案)我们再次添加“ mode-open”类。我怀疑这在某种程度上导致了我所看到的闪烁，可能是由于一些缓慢的 HTML/CSS 渲染。

另一个解决方案是首先防止 bootstrap 从 body 元素中删除“ mode-open”类。 使用 Bootstrap 3.3.7，这个内部 真难看函数的覆盖对我来说非常合适。

$.fn.modal.Constructor.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
if ($(".modal:visible").length === 0) {
that.$body.removeClass('modal-open')
}
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}

在此重写中，只有当屏幕上没有可见的模态时，才会删除“ mode-open”类。并且可以防止在 body 元素中移除和添加类的一个框架。

只要包括引导程序加载后的覆盖。

小开

为什么不改变模态主体的内容呢？

    window.switchContent = function(myFile){
$('.modal-body').load(myFile);
};

在模式中只需放置一个链接或按钮

    <a href="Javascript: switchContent('myFile.html'); return false;">
click here to load another file</a>

如果你只想在两种情态之间切换:

    window.switchModal = function(){
$('#myModal-1').modal('hide');
setTimeout(function(){ $('#myModal-2').modal(); }, 500);
// the setTimeout avoid all problems with scrollbars
};

在模式中只需放置一个链接或按钮

    <a href="Javascript: switchModal(); return false;">
click here to switch to the second modal</a>
小开

试试这个:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
if($(".modal:visible").length > 0) {
//Slap the class on it (wait a moment for things to settle)
setTimeout(function() {
$('body').addClass('modal-open');
},100)
}
});
小开

这个帖子已经过时了，但是对于那些来自谷歌的人来说，我提出了一个解决方案，这个解决方案是从我在网上找到的所有答案中混合而来的。

This will make sure level class is being added:

$(document).on('show.bs.modal', '.modal', function (event) {
$(this).addClass(`modal-level-${$('.modal:visible').length}`);
});

在我的 SCSS Ive 中写了一个规则，支持主模式和10在顶部(10，因为从 z-index: 1060弹出发生) ，你可以添加级别计数内 _variables.scss如果你想:

@for $level from 0 through 10 {
.modal-level-#{$level} {
z-index: $zindex-modal + $level;


& + .modal-backdrop {
z-index: $zindex-modal + $level - 1;
}
}
}

不要忘记，你不能有模态内的模态，因为他们的控制将是混乱的。在我的情况下，我所有的情态动词都在 body的末尾。

最后，正如下面的成员也提到了这一点，在关闭一个模态之后，你需要在 body上保持 modal-open类:

$(document).on('hidden.bs.modal', function (e) {
if ($('.modal:visible').length > 0) {
$('body').addClass('modal-open');
}
});
小开

如果你没有正确关闭第一个模式，将会出现滚动故障。 下面是一个使用 Bootstrap 4的示例

HTML:

<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<button onclick="goToModal2">
Go To Modal 2
</button>
</div>
</div>
</div>


<div class="modal fade" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<button onclick="goToModal1">
Go To Modal 1
</button>
</div>
</div>
</div>

Javascript:

function goToModal2(){
$("#modal-1").modal("hide");
$("#modal-1").on("hidden.bs.modal", () => {
$("#modal-2").modal("show");
$("#modal-1").unbind("hidden.bs.modal");
});
}


function goToModal1(){
$("#modal-2").modal("hide");
$("#modal-2").on("hidden.bs.modal", () => {
$("#modal-1").modal("show");
$("#modal-2").unbind("hidden.bs.modal");
});
}

虽然这不是最好的方法，但对我来说很有效。

小开

您可以使用此代码使用甚至多于2个模态(此示例使用3个模态) :

    $('.modal').on('shown.bs.modal', function (e) {
$('.modal.show').each(function (index) {
$(this).css('z-index', 1101 + index*2);
});
$('.modal-backdrop').each(function (index) {
$(this).css('z-index', 1101 + index*2-1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>






<a data-toggle="modal" href="#myModal1" class="btn btn-primary">Launch modal</a>


<div class="modal" id="myModal1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal 1</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
<p>
Content 1.
</p>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>


</div>


<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">modal 2</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
<p>
modal 2
</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
<a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal3</a>
</div>
</div>
</div>
</div>


<div class="modal" id="myModal3">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal 3</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
<p>
modal 3
</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>

小开

也许吧，不错:

<style>
#modal2 .modal-content{
box-shadow: 0 0 50px 10px #999 !important;
}
</style>

提交答案