JQuery kullanarak bir Bootstrap kalıcı pencere nasıl açılır?

769

Twitter Bootstrap kalıcı pencere işlevini kullanıyorum. Birisi formumda gönder'i tıkladığında, formdaki "gönder düğmesini" tıkladıktan sonra kalıcı pencereyi göstermek istiyorum.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript  jquery  twitter-bootstrap 
— user244394
kaynak
Şov seçeneğinizde bir yazım hatası var. Bir boolean alır, bu yüzden 'false' - $ ('# my-modal') etrafına tırnak koymayın. Modal ({show: false});
— Darren Parker

Yanıtlar:

1413

Bootstrap, modals üzerinde manuel olarak çağrılabilen birkaç işleve sahiptir:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Daha fazlasını burada görebilirsiniz: Bootstrap modal bileşeni

Özellikle yöntemler bölümü .

Yani değiştirmeniz gerekecek:

$('#my-modal').modal({
    show: 'false'
});

için:

$('#myModal').modal('show');

Kendinize ait özel bir açılır pencere oluşturmak istiyorsanız, başka bir topluluk üyesinden önerilen bir video:

https://www.youtube.com/watch?v=zK4nXa84Km4

— kovalamak
kaynak
5
Bunun neden benim durumumda çalışmadığından emin değilim. Sayfamda aynı demo kodu var ve gönder düğmesini yukarıdaki gibi kodladım. Ancak, gönder'i tıkladığımda kalıcı pencere hızlı yanıp sönüyor ve gitti. Sayfayı döndürmek için tarayıcı 'geri' düğmesine tıklamam gerekiyor.
— Chris22
6
Yukarıdaki yorumum için burada anwser buldum . Site sayfalarında bootrap.js'ye yinelenen bağlantı.
— Chris22
1
Yakalanmayan TypeError: $ (...). Modal bir işlev değil, bu muhtemelen ben ama neden bu hatayı aldığım hakkında herhangi bir fikir? (jQuery var)
— Vladimir Verleg
4
Sorunumu öğrendim, Jquery dahil bir dosya cadı için bir ajax çağrısı yaptım. JQuery 2 kez dahil edilirse çalışmaz!
— Vladimir Verleg
2
Denedim .modal('show')ama google chrome tarayıcısında çalışmıyor
— Durga
89

Ek olarak veri özelliği ile kullanabilirsiniz

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Bu durumda javascript yazmanıza gerek yoktur.

Daha fazlasını burada görebilirsiniz: http://getbootstrap.com/2.3.2/javascript.html#modals

— Gandarez
kaynak
4
Açıklığa kavuşturmak için: "javascript kullanmanıza gerek yok", "javascript yazmanıza gerek yok" anlamına gelir, javascript hala kullanılmaktadır. Cevabı düzenlemeye çalıştım ama "daha doğru" olmadığı için reddedildi. Javascript devre dışıyken yukarıdaki kodu denerseniz, çalışmaz. Bu benim için javascript kullandığınız anlamına gelir.
— npretto
83

Çoğu zaman, $('#myModal').modal('show');işe yaramadığında, jQuery'yi iki kez dahil etmekten kaynaklanır. JQuery'yi 2 kez dahil etmek, kiplerin çalışmamasını sağlar.

Yeniden çalışması için bağlantılardan birini kaldırın.

Ayrıca, bazı eklentiler de hatalara neden olur, bu durumda 

jQuery.noConflict(); 
$('#myModal').modal('show');
— Vladimir Verleg
kaynak
3
Önceden paketlenmiş jQuery sürümü olan DataTables bana neden oldu
— Wesley Smith
2
Çok teşekkür ederim. Aynı sorunu yaşıyorum: mod bir işlev değil. Ancak jQuery.noConflict () eklendikten sonra çalışır.
— Jobayer Ahmmed
1
Bu geçici çözümün yalnızca kök nedenini çözemiyorsanız kullanılması gerekir (yani yalnızca bir kez jQuery ekleyin). Bazı üçüncü taraf eklentileri ekliyorsa, ya dahil olmayan sürümü arayın ya da bir tane oluşturmak için üçüncü tarafla iletişime geçin.
— rybo111
19

jQuerySeçiciyi kullanarak mod yöntemini (herhangi bir parametre iletmeden) çağırmanız yeterlidir.

İşte örnek:

$('#modal').modal();
— Brane
kaynak
1
Modelime nasıl daha fazla parametre iletebilirim? Örneğin, belirli bir (dinamik) kimlik?
— Pathros
1
Kimliğinizi nasıl dinamik hale getirirsiniz? Kimlik ile mi yapıyorsunuz? evet ise, geçerli nesneyi seçmek ve parametreleri ona iletmek için jQuery'den $ (this) işlevselliğini kullanabilirsiniz.
— Brane
13

JQuery tarafından bir mod çağrısı yapmak için bağlantıların onclick işlevini kullanırsanız, "href" boş olamaz.

Örneğin:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

Kip gösteremez. Doğru kod:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
— saneryee
kaynak
12

Belge hazır olur olmaz önyükleme uyarısını nasıl yükleyeceğiniz aşağıda açıklanmıştır. Sadece eklemek çok kolay

 $(document).ready(function(){
   $("#myModal").modal();
});

W3Schools üzerinde bir demo yaptım.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <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">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Snippet'i genişlet

— csandreas1
kaynak
10

Tüm çözümü buradan kontrol edin:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Sonuç almak için kütüphaneleri gereken sıraya koyduğunuzdan emin olun:

1- İlk bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(Başka bir deyişle, bootstrap.min.js'den önce jquery.min.js çağrılmalıdır)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— A.Aleem11
kaynak
7

Başarısız olan birkaç yöntem denedim, ancak aşağıda bir cazibe gibi çalıştı:

$('#myModal').appendTo("body").modal('show');
— olağan
kaynak
2
Aynı! Benim için de işe yarayan tek çözüm bu.
— pengz
İstemediğinden emin misin .appendTo("modal-body")?
— James A Mohler
@novembersky, kodu click olayının içine veya jquery kullanarak sayfa yüklendiğinde koymanız gerekir: $ (document) .ready (function () {$ ("# myModal"). modal ();});
— Abhijit Kumar
7

İşlevi çağırırken $ sign yerine jQuery kullanmaya çalışın, aşağıda gördüğüm gibi benim durumumda çalıştı.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); çünkü jQuery ('# myModal'). modal ('show'); çalışmıyor, bunun nedeni jQuery'yi iki kez eklemektir. JQuery'yi 2 kez dahil etmek, kiplerin çalışmamasını sağlar. ve bu durumda sorunu çözer, benim durumumda olduğu gibi tekrar eder.

Ayrıca bu bağlantıya gidebilirsiniz

Bootstrap Model Penceresi JQuery Çağrısıyla Gösterilmiyor

— IB
kaynak
4

Deneyin

$("#myModal").modal("toggle")

Kipli myModal kimliğini açmak veya kapatmak için.

Yukarıdaki çalışmazsa, bootstrap.js başka bir js dosyası tarafından geçersiz kılınmış demektir. İşte bir çözüm

1: - Bootstrap.js dosyasını diğer js dosyalarını geçersiz kılacak şekilde aşağıya taşıyın.

2: - Siparişin aşağıdaki gibi olduğundan emin olun

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
— Nikhil Mohadikar
kaynak
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Modal'ı bunun altındaki kodla başlatabilirsiniz.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
— Alperzkn
kaynak
1

Bunu dene

myModal1 modun kimliği

$('#myModal1').modal({ show: true });
— vivek
kaynak
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
— Sahnosh Rahguzar
kaynak
3
Zaten cevapları olan soruları cevaplarken, lütfen mevcut cevapları genişletmeye çalışın. Ayrıca, kodunuzun soruya nasıl yanıt verdiğine dair bir açıklama eklemek genellikle iyi bir fikirdir.
— Chris Camaratta
0

Bootstrap 4.3 - burada daha fazlası

Kod snippet'ini göster

— Kamil Kiełczewski
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.