Twitter önyükleme modeli nasıl kapatılır (ilk başlatmadan sonra)

Ben çok acemiyim, bu yüzden twitter önyükleme modeli ile bir şeyi (muhtemelen bariz) denetlediğimi düşünüyorum. Yapmaya çalıştığım şey, yalnızca mobil cihazlarda başlatmak için bir model almak. Bu, modal div'e .visible-phone sınıfını ekleyerek sorunsuz çalışır. Çok uzak çok iyi. Ama sonra çalışmasını istiyorum, yani X düğmesiyle kapatabilirsiniz. Ve düğmeyi çalıştıramıyorum.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

Html'nin altına jquery.js (ilk) ve bootstrap.modal.js ve bootstrap.transition.js'yi koydum. Aslında tüm bootstrap js modülleri (bir dahil etme kaçırmamak için). JS ile deneyimli değilim ..

Gerçekten aptalca bir soru sorduysam lütfen beni affet. Bu özel durumun cevabını günlükte bulamadım.

$('#myModal').modal('hide') yapmalı

Şununla açılmışsa, önyükleme kalıcı iletişim kutusunu kapatırken sorun yaşadım:

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

Aşağıdaki bağlantıyla iletişim kutusunu açarak bu sorunu çözdüm:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

İlklendirmeyi unutmayın:

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

Kapatma düğmesi için aşağıdaki öznitelikleri de kullandım:

data-dismiss="modal" data-target="#myModal"

Sınıf gizlemesini modala ekleyin

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

Javascript Kodu

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

.modal ('gizle') bir modeli manuel olarak gizler. Önyükleme modelinizi kapatmak için aşağıdaki kodu kullanın

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

Burada çalışan codepen'e bir göz atın

Veya

Burada dene

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Data-target ile düğmenin kapatması gereken tam olarak modal belirtmeyi deneyin. Yani düğmeniz aşağıdaki gibi görünmelidir -

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

Ayrıca, diğerlerini güvenli bir şekilde kaldırabilmeniz için yalnızca bootstrap.modal.js'ye ihtiyacınız vardır.

Düzenleme: Bu işe yaramazsa, görünür telefon sınıfını kaldırın ve telefon yerine PC tarayıcınızda test edin. Bu, örneğin javascript hataları alıp almadığınızı veya bunun bir uyumluluk sorunu olup olmadığını gösterecektir.

Düzenleme: Demo kodu

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Belgelere göre gizle / değiştir çalışmalıdır. Ama öyle değil.

İşte böyle yaptım

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

Bunu dene ..

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

Aynı sorunu iphone veya masaüstünde yaşadım, kapat düğmesine basarken iletişim kutusunu kapatmayı başaramadım.

<button>etiketinin tıklanabilir bir düğmeyi tanımladığını ve bir öğenin type özniteliğini aşağıdaki gibi belirtmek için gerekli olduğunu öğrendim :

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Bootstrap modalleri için örnek kodu kontrol edin: BootStrap javascript Page

Eşzamanlı olarak gösterilen birkaç modalınız varsa, mod içi düğme için özniteliklerle hedef mod belirtebilirsiniz data-toggleve data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

Mod kodunun dışında bir yerde başka bir geçiş düğmesine sahip olabilirsiniz:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

Kullanıcı, bu düğme gizliyken mod içi geçiş düğmesini tıklayamaz ve "modal"özellik seçeneği ile doğru şekilde çalışır data-toggle. Bu şema otomatik olarak çalışıyor!

Burada sadece sayfa yenilemeden modları kapatmak için değil, aynı zamanda enter tuşuna basıldığında modal gönderir ve yenilemeden kapanır.

Sitemde, birden çok kipi kullanabileceğim ve bazı kiplerin verileri gönderirken işlediği ve bazılarının yapmadığı bir yerde kurdum. Yaptığım şey, işleme yapan her modal için benzersiz bir kimlik oluşturmak. Örneğin web sayfamda:

HTML (kalıcı altbilgi):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

Gördüğünüz gibi, bu gönderim işlemi gerçekleştiriyor, bu yüzden bu model için bu jQuery'ye sahibim. Şimdi diyelim ki bu web sayfasında başka bir modal var, ancak hiçbir işlem yapılmıyor ve bir modal bir seferde açık olduğundan, diğerini $(document).ready()tüm sayfaların alacağı global bir php / js betiğine koyuyorum ve modun kapat düğmesine şu adı verilen bir sınıf veriyorum ".modal-close":

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (global.inc dahil):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });