したがって、このコードを使用して、現在開いているモーダル ウィンドウで別のモーダル ウィンドウを開きます。
<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>
何が起こるかというと、500 ミリ秒ほどスクロールバーが複製されます。現在のモーダルがまだフェードアウトしているためだと思います。しかし、それは非常に滑らかではなく、途切れ途切れに見えます。
この問題を解決するための提案をいただければ幸いです。
また、これをonclick-eventで構築する方法は専門的ではありませんか?
ブートストラップ バージョン 3.0 を使用しています。
編集：モーダルをフェードアウトする時間を短縮する必要があると思います。これはどのように可能ですか？
data-dismiss現在のモーダル ウィンドウを強制的に閉じます
data-togglehrefその中にコンテンツを含む新しいモーダルを開きます
<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>
また
<a data-dismiss="modal" onclick="call the new div here">Click</a>
動作するかどうかお知らせください。
現在開いているモーダル ウィンドウで別のモーダル ウィンドウを開くには、bootstrap-modal
を使用できます。
これを試して
<!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>Twitter ドキュメントには、カスタム コードが必要であると記載されています...
これは追加の 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 -->これを試して：
// Hide the login modal
$('#login').modal('hide');
// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);
この単純なハックは私にとってはうまくいきます。
私のコードは、data-dismiss を使用してうまく機能します。
<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>
スクロール可能なモーダルにも問題があったので、次のようにしました。
$('.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');
});
表示されるモーダル内のモーダルに役立ちます。1 つ目は閉じているため、2 つ目が表示されることに注意してください。Bootstrap 構造に変更はありません。
私はまったく別のルートを一緒に行ったので、それらを「ネスト解除」することにしました。多分誰かがこれを便利だと思うでしょう...
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.
このスレッドは古いですが、Google から来た人には、ネットで見つけたすべての回答からハイブリッドなソリューションを提供します。
これにより、レベル クラスが追加されていることが確認されます。
$(document).on('show.bs.modal', '.modal', function (event) {
$(this).addClass(`modal-level-${$('.modal:visible').length}`);
});
私の SCSS 内で、メインモーダルと 10 をサポートするルールを書きました (z-index: 1060ポップオーバーが発生するため 10)。必要に_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ました。
modal-openそして最後に、以下のメンバーもこれについて言及しているように、1 つのモーダルを閉じた後、クラスをオンにしておく必要がありますbody。
$(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");
});
}
それは最善の方法ではありませんが。しかし、それは私にとって完璧に機能しました。