Bootstrap: Modal'de Başka Bir Modal Açın

97

Bu nedenle, şu anda açık olan bir kalıcı pencerede başka bir kalıcı pencere açmak için bu kodu kullanıyorum:

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

500 ms gibi bir süre için kaydırma çubuğunun kopyalanmasıdır. Sanırım şu anki model hala kayboluyor. Ancak çok düzgün ve kekemeli görünüyor.

Bu sorunu çözmek için her türlü öneriyi takdir ediyorum.

Ayrıca, bunu bir onclick etkinliğinde profesyonelce oluşturmanın yolu mu?

Bootstrap 3.0 sürümü ile çalışıyorum.

Düzenleme: Sanırım bir modelin kaybolma süresini kısaltmak gerekiyor. Bu nasıl mümkün olabilir?

javascript  jquery  twitter-bootstrap  modal-dialog  twitter-bootstrap-3 
— AlexioVay
kaynak
3
Çalışan bir örnek bootply.com/lvKQA2AM28
— CrandellWS

Yanıtlar:

87

data-dismiss mevcut kalıcı pencere kuvvetini kapatır

data-togglehrefiçeriğiyle yeni bir model açar

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

veya

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

işe yarayıp yaramadığını bize bildirin.

— Jayeshkv
kaynak
Teşekkürler, işe yarıyor ve "onclick" kullanmaktan kaçınıyor. Ancak animatiom, kaydırma çubuğunu bir saniyeliğine hala ikiye katlıyor.
— AlexioVay
@ user2829128 bu ne data-dismissyapar. Mevcut pencereyi kapatır ve yeni bir pencere açar. Kodunuzu bootplyveya içine gönderebilir misiniz jsfiddle?
— jayeshkv
14
Yükseklik uzunsa kaydırma ikinci modelde çalışmayacaktır.
— Giraldi
Burada da bootstrap v4 ile aynı. İlk mondalda butona tıkladığımda diğer modal açılıyor, ikinci mod gövde kaydırmalı olarak görünüyor. Problemler beden için .modal-açık sınıfındadır. Tıkladığımızda ve tekrar eklenmediğinde kaldırılır.
— fdrv
7
.modal { overflow-y: auto }BS4 kaydırma sorununu çözer.
— Riki137
86

Benim çözümüm alt modu kapatmıyor, bunun üzerine gerçekten yığılıyor. Kaydırma davranışını doğru bir şekilde korur. Bootstrap 3'te test edilmiştir. Modallerin beklendiği gibi yığılması için, onları Html biçimlendirmenizde en düşükten en yükseğe doğru sıralamanız gerekir.

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

GÜNCELLEME: Yığınlanmış modları oluşturduğunuzda, tüm arka planlar en alttaki modelin altında görünür. Aşağıdaki CSS'yi ekleyerek bunu düzeltebilirsiniz:

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

Bu, en üstteki görünür modelin altında kalıcı bir arka plan görüntüsü verecektir. Bu şekilde alttaki alt modellerinizi grileştirir.

— H Köpek
kaynak
2
Sayfa işaretlemesinde daha sonraki öğeler doğal olarak daha yüksek bir z-endeksine sahiptir ve biçimlendirmede daha önce görünen öğelerin üzerine yığılır. Açık bir z-endeksi ayarlamadığınız sürece.
— H Dog
1
@H Dog: Tam olarak ihtiyacım olan şey :) mükemmel çalışıyor. Teşekkürler!
— Tobias Koller
2
Gerçekten efsanevi !! Ne zaman birisi sadece bunun için bir eklenti kullanmayı önerdiğinde ... sadece basit bir problem için basit bir çözüme sahip olmak istedi ve işte karşınızda ...
— Fr0zenFyr
2
Yardımınız için çok teşekkür ederim. Aynı anda iki model kullandığımda çözümünüz sorunumu çözdü !!!!!
— Levon
3
Javascript Bootstrap 4 için çalıştı, ancak CSS çalışmadı. Bunun yerine arka planı gizledim ve ardından .modal: {content: ""; Ekran bloğu; arkaplan: rgba (0,0,0, .5); pozisyon: sabit; üst: 0; alt: 0; genişlik:% 100; z-endeksi: -1; }
— Jason G.
19

bunu dene

<!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>
Snippet'i genişlet

— Elon Gomes Vieira
kaynak
1
başarısız benim için .. = (modal çalışıyor ancak 1. modal uzunsa 1. modal için bir kaydırma görünür ve 2.
— modu açıp kapattığınızda
Çok teşekkür ederim, çok yardımcı oldu :)
— Daniel Muñoz
18

hidden.bs.modalOlayı çağırarak eski modun ne zaman kapandığını gerçekten tespit edebilirsiniz :

    $('.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
            });

    });

Daha fazla bilgi için: http://getbootstrap.com/javascript/#modals-events

— Giraldi
kaynak
16

2018 Güncellemesi - Bootstrap 4'ü Kullanma

Cevapların çoğunun çok fazla gereksiz jQuery'ye sahip olduğunu buldum. Başka bir modelden bir modal açmak, basitçe Bootstrap'in sağladığı show.bs.modal. Ayrıca, arka plan kaplamalarını işlemek için biraz CSS isteyebilirsiniz. İşte başka bir senaryodan 3 açık modal ...

Başka bir modelden modal açın (1. modeli açık tutun)

<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>

Bu durumda olası bir sorun, 2. modelin arka planının 1. modeli gizlemesidir. Bunu önlemek için 2. modal yapın data-backdrop="static"ve arka planların z-dizinlerini düzeltmek için biraz CSS ekleyin ...

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

https://www.codeply.com/go/NiFzSCukVl

Başka bir modelden modal açın (1. modal kapatın)

Bu yukarıdaki senaryoya benzer, ancak 2. modal açıldığında 1. modu kapattığımız için arka plan CSS düzeltmesine gerek yoktur. 2. modals show.bs.modalolayını işleyen basit bir işlev , 1. modu kapatır.

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

https://www.codeply.com/go/ejaUJ4YANz

Modal'ı başka bir modal içinde aç

Son çoklu mod senaryosu, 1. modal içinde 2. modal açmaktır. Bu durumda 2. için işaretleme 1.'in içine yerleştirilir. Ekstra CSS veya jQuery gerekmez.

<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://www.codeply.com/go/iSbjqubiyn

— Zim
kaynak
Bootstrap 4'te çalışmaz. 2. modu kapattığınızda, birinci mod artık kaydırılamaz.
— Justin
@Justin - Bunu gösteren belirli bir senaryo görmüyorum ve kaydırma orijinal sorunun kapsamı dışında olduğu için. Kaydırma konusuna özgü başka bir soru aramanızı veya sormanızı öneririm.
— Zim
nth-of-type benim için işe yaramadı çünkü sınıfa bakmıyor. .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
— İle
14

Modal'de Modaller:

$('.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>
Snippet'i genişlet

— RedDevil2015
kaynak
başarısız benim için .. = (modal çalışıyor ancak 1. modal uzunsa 1. modal için bir kaydırma görünür ve 2.
— modu açıp kapattığınızda
Yukarıdaki örnek ilk modal yerine modal ortaya çıkarır, ne üstte ne de üstte (birincisi artık görünür değildir).
— JackTheKnife
Çok güzel etki.
— Jorge B.
Çözümünüzü Semantic UI'de kullanmak nasıl mümkün olabilir?
— vahidsamimi
9

Diğer kipleri çağıran çok sayıda kipi ve her düğme için her seferinde onu başlatmayı bilmeyebilecek birkaç HTML görevlisini içeren bir proje üzerinde çalışıyorum. İlk önce uzun yoldan gittikten sonra gönülsüzce @gmaggio ile benzer bir sonuca ulaştı.

DÜZENLEME: Artık javascript aracılığıyla çağrılan modları destekliyor.

DÜZENLEME: Başka bir modelden kayan bir modal açmak artık çalışıyor.

$(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');
    };
});

Sadece modsal arama butonunu normal şekilde yerleştirin ve bir modal içinde olmak üzere yakalanırsa, data-target içinde belirtileni açmadan önce mevcut olanı kapatacaktır. Bunun relatedTargetBootstrap tarafından sağlandığını unutmayın .

Solmayı biraz düzeltmek için şunları da ekledim: Eminim daha çok şey yapılabilir.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
— Ren
kaynak
% 100 senin problemin değil ama gösterilen.bs.modal kancası çok kullanışlı. Body.modal-open sınıfının yönetimi BS v.3.3.5'te hatalı görünüyor, bir modal kapatıp diğerini açtıktan sonra eksik ve bu nedenle arka plan (ikinci) modal yerine kayıyor. Kancanız bu davranışı düzeltebilir.
— Manuel Arwed Schmidt
7

Twitter belgeleri özel kodun gerekli olduğunu söylüyor ...

Bu, fazladan JavaScript olmadan çalışır, ancak özel CSS şiddetle tavsiye edilir ...

<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 -->
Snippet'i genişlet

— CrandellWS
kaynak
1
İşte 2. modal uygun şekilde biçimlendirilmiş başka bir örnek bootply.com/qRsvPSrcO5
— Zim
1
@Css'de yaptığınız gibi z-endeksini hızla değiştirmek iyi bir fikirdir ...z-index: 1080 !important;
— CrandellWS
4
2. modu açarsanız ve dışını tıklarsanız, dinlenebilir. (Chrome, en son)
— Martin Braun
belki yanılıyorum ama belgelerin bir modele modal koymamayı söylediğine inanıyorum, bu hiç de şaşırtıcı değil
— CrandellWS
7

Bootstrap 4 için, @ helloroy'un yanıtını genişletmek için aşağıdakileri kullandım; -

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-- ;
});

Yukarıdakinin avantajı, yalnızca bir modal olduğunda herhangi bir etkisinin olmaması, yalnızca katlar için devreye girmesidir. İkincisi, halihazırda üretilmemiş olan gelecek modellerin hala karşılanmasını sağlamak için idareyi vücuda devreder.

Güncelleme

Bir js / css birleşik çözüme geçmek görünümü iyileştirir - solma animasyonu arka planda çalışmaya devam eder; -

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-- ;
});

aşağıdaki css ile birlikte; -

.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 ;
}

Bu, ihtiyacım olandan daha fazla olan 4 derinliğe kadar yuvalanmış modları işleyecektir.

— Smartbloke
kaynak
Bootstrap 4'te çalışmaz. 2. modu kapattığınızda, birinci mod artık kaydırılamaz.
— Justin
4

Bunu dene:

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

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

Bu basit hack benim için çalışıyor.

— Hıristiyan
kaynak
4

Bootstrap 4 kullanan biri için 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>
Snippet'i genişlet

— cehennem
kaynak
Bu harika, geriye kalan tek sorun, en üst modal kapatıldığında kaydırma çubuğunun yeniden görünmesini engellemekti
— HyperActive
2

Kaydırılabilir kiplerimde de bazı sorunlar yaşadım, bu yüzden şöyle bir şey yaptım:

  $('.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');
  });

Görünen bir modeldeki herhangi bir model için hizmet verecektir . İlkinin kapalı olduğunu ve böylece ikincisinin görünebileceğini unutmayın. Bootstrap yapısında değişiklik yok.

— çaylar
kaynak
2

Hep birlikte farklı bir rotaya gittim, onları "De-Nest" yapmaya karar verdim. Belki birisi bunu kullanışlı bulacaktır ...

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.
— Dylan Hayes
kaynak
Çok teşekkür ederim
2

Kodum data-dismiss kullanarak iyi çalışıyor.

<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>
— user3675926
kaynak
1

İlk Bootstrap modelini kapatın ve yeni modeli dinamik olarak açın.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
— Abhishek
kaynak
1

Neden sadece modal gövdenin içeriğini değiştirmiyorsunuz?

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

Modalde sadece bir bağlantı veya düğme koyun

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

Sadece 2 mod arasında geçiş yapmak istiyorsanız:

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

Modalde sadece bir bağlantı veya düğme koyun

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
— Carlo
kaynak
Bu daha çok UX ile ilgili bir cevap gibi, çünkü buna Modal # 1 ile ilgili bir hata mesajı görüntülemek için ihtiyacım vardı. Yani Modal # 2 hata mesajını aldı. Ama şimdi bu soruyu soralı asırlar oldu ve bu tür şeyleri şimdi farklı yapıyorum.
— AlexioVay
0

bunu dene:

$('.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)
  }
});
— Rakesh Vadnal
kaynak
0

H Dog'un verdiği cevap harika, ancak bu yaklaşım aslında bana Internet Explorer 11'de biraz modsal titreme veriyordu. Bootstrap önce 'modal-open' sınıfını kaldırarak modu gizleyecek ve sonra (H Dogs çözümünü kullanarak) tekrar 'modal-open' sınıfı. Bunun bir şekilde gördüğüm titremeye neden olduğundan şüpheleniyorum, belki biraz yavaş HTML / CSS oluşturma nedeniyle.

Diğer bir çözüm ise, ilk etapta 'modal-open' sınıfını gövde elemanından çıkarırken önyüklemeyi önlemektir. Bootstrap 3.3.7 kullanıldığında, dahili hideModal işlevinin bu geçersiz kılınması benim için mükemmel çalışıyor.

$.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')
    })
}

Bu geçersiz kılmada, 'modal-open' sınıfı yalnızca ekranda görünür modlar olmadığında kaldırılır. Ve bir çerçevenin kaldırılmasını ve body öğesine bir sınıf eklemesini engelliyorsunuz.

Sadece bootstrap yüklendikten sonra geçersiz kılmayı dahil edin.

— Adam
kaynak
-4 

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

— Alex Sh.
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.