1. ev
  2. Soru-cevap
  3. * Yalnızca * Bootstrap modunu kullanma

* Yalnızca * Bootstrap modunu kullanma

2013-06-13 17 views
43

Modal'ımı Bootstrap'ten, kullanmayan başka bir siteyle entegre ediyorum. Bu önyükleme programının her bileşen için Javascript'i ayırmanıza izin verdiğini görüyorum. Peki ya CSS? Bootstrap.css ile bağlantı kurarsam tüm site değişecektir. Modal'ın çalışması için yeterli CSS istiyorum. (CSS dosyasından geçmeyi ve sadece neye ihtiyacım olduğunu tahmin etmeyi denedim, ama işe yaramadı).* Yalnızca * Bootstrap modunu kullanma

kaynak

2013-06-13 mdundas

+0

i sağ önyükleme kullanımlarını Hatırlarsanız Oluşturulacak stil sayfası için 'daha az'. Bu yüzden, tüm kuralları bir ör. Çevrenizdeki kapsayıcıya eklediğiniz '.my-project 'sınıfı. Ya da eğer bu bir seçenekse iframe'in korumasını kullanırsınız, bu da sizin öğelerinizin görünür olduğu alanın sınırlanmasıyla 'iframe' –

+0

boyutuna sınırlandırılmıştır. Modal JS Bileşeni VE Modal JQuery Eklentisini seçmelisiniz. http://twitter.github.io/bootstrap/customize.html – mdundas

+0

thx T. iFrame kum havuzu hakkında fikriniz var gibi ...başka sorunlara koşarsam bunu yapar ... – mdundas

cevap

76

Güncelleme

Bootstrap v3.2.5 itibariyle sayesinde v3.2.5 itibariyle onay @Gruber için. Kurulumu @Fisu tarafından belirtildiği gibi özelleştirmek için bağlantı hala here'dir.

Belirtildiği gibi sadece modal değil, 4 seçeneği de seçmeniz gerekir. Her şeyi kapatmak için Tümü Değiştir'i tıklatarak başlayın, ardından bu 4 seçeneği seçin; JavaScript bileşenleri altında

  • Buttonsaltında
  • Close icon Bileşenleri
  • Component animations (for JS)altında Bilinen CSS altında JavaScript bileşenleri

  • Bu, ihtiyacınız olan tüm CSS'yi getirmelidir. Sonraki her şeyi yeniden kapatmak için geçiş All seçerek başlayın ve daha sonra sadece iki eklentileri seçmek, jQuery eklentileri bölümdür: bileşenlereSihirli altında

  • Transitions Bağlı altında

    • Modals (her türlü gerekli Eğer ihtiyacınız olan tüm, js (bootstrap.min.js) ve css var

    ) animasyonlar (sadece biraz değiştirmeniz gerekir bootstrap.css) aşağıda açıklanmıştır. Bu sayfanın altına gidin ve derlemesini seçin ve paketinizi almak için'u indirin.

    Dikkat edilmesi gereken son bir ş[email protected], olarak belirttiği gibi, css'nin başlangıcına hala birçok normalizasyon ekledim, ancak güvenli bir şekilde silebiliyordum (html'den img'ye, css'yi .img yanıtından başlayarak). "Bu hala geçerli. Ben de Kiplerin içine birkaç stilleri zorlamak için aşağıdaki css ekledi: Bu sadece yazı orijinal modal stil benzer ve Sayfalarınız stilleri üzerinde yapmayız garanti

    .modal { font-family:Arial,Helvetica,sans-serif!important} 
.modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}

    (muhtemelen biraz tweaked olabilir Daha). Dikkat edilmesi gereken son bir öğe, bu noktada css'yi http://cssminifier.com/ üzerinden çalıştırarak küçültebilirsiniz. Birkaç KB kaydeder. Modal uygulanması

    :

    Ben de sadece bu bitirmek olabilir. Ben bir çerez eklentisi kullanıyorum çünkü kullanıcılara mesajı 14 gün boyunca saklamak için bir seçenek olarak vermek istiyorum. İşte kod blokları ihtiyacınız vardır: biten </head> etiketi çalışacak

    Bu muhtemelen css herhangi geçmesine rağmen belgenin <head>, gitmeli, bu yüzden bile hemen önce.

    <!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP --> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css"> 

<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    Bu <body> içinde gitmek gerekir. Bu, modal oluşturur ve dahil ettiğiniz css onu gizler.

    <!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP --> 

    <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title" id="important-msg-label">Message Title!</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Message text</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button> 
      </div> 
     </div> 
     </div> 
    </div> 

<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    Bu kod sadece biten </body> etiketinden önce gitmek gerekir. İhtiyacım olan jQuery, bootstrap ve cookie eklentisini yükler.

    <!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP --> 

    <!-- Latest jQuery (1.11.1) --> 
    <script src="modalsonly/js/jquery-1.11.1.min.js"></script> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>  

    <!-- jQuery Cookie --> 
    <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script> 

<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    Son olarak, bu komut dosyasını yukarıdaki eklentilerden sonra eklemek isteyeceksiniz. Bu durum benim durumum için biraz özelleştirildi, ben sadece bir çerez kümesi yoksa modal başlatıyorum ve modal lansmanları, modalın lansmanını devre dışı bırakmak için cookie'yi yaratan Show Show Again'ı tıklatması için bir fonksiyon yarattı.

    <script> 
    //Start the DOM ready 
    $(document).ready(function() { 


     //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP 

      //Check to see if the cookie exists for the Don't show again option 
      if (!$.cookie('focusmsg')) { 
       //Launch the modal when you first visit the site    
       $('#important-msg').modal('show'); 
      } 

      //Don't show again mouse click 
      $("#dont-show-again").click(function() { 

       //Create a cookie that lasts 14 days 
       $.cookie('focusmsg', '1', { expires: 14 });  
       $('#important-msg').modal('hide');  

      }); //end the click function for don't show again 

     //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP 


    }); //End the DOM ready 
</script>

    Bu yardımcı olur umarız! İyi şanslar. İşte

kaynak

2014-10-09 19:40:54

+3

Dostum. Müthiş cevap. – Haymaker87

+0

Teşekkürler, yardım ettiğine sevindim! Bunu okuyan biri cevabın güncelliğini yitirdiğini görürse, lütfen bize bildirin ve onu güncelleyeceğim. –

+2

Bootstrap 3.3.5 sürümünden beri bunun hala geçerli ve mükemmel bir şekilde çalıştığını söyleyebiliriz. Ayrıca, animasyon efektlerinin etkili olması için jQuery eklenti bileşiminde (** Magic ** altında) [transitions.js] (http://getbootstrap.com/javascript/#transitions) eklemeyi unutmayın. – Gruber

14

Bootstrap customize section'a gidin ve bileşenler bölümündeki yalnızca modal seçeneği seçin. Dosyayı indirin, bootstrap.css dosyasını açın ve tüm içeriği kendi CSS dosyanıza kopyalayın.

İhtiyacınız olan belirli parçaları incelemeye çalışırsanız, muhtemelen önemli bir şeyi kaçırırsınız ve ayrıca, modal css kendi başına çok büyük değildir.

Güncelleştirme: Bağlantı şu anda here. Css'nin başlangıcına hala çok fazla normalizasyon ekledim, ancak güvenli bir şekilde silebilir (html'den img'ye, css'yi .img yanıtından başlayarak).

kaynak

2013-06-13 13:37:49 Fisu

+0

Bu neredeyse benim için çalıştı. Hariç .modal-dialog sınıfı için özel bir genişlik belirledim. Tam önyükleme kulla- nımı kullanıldığında doğru şekilde çalıştı, ancak modal özelleştirilmiş dosyaları kullanarak, iletişim kutusunun yarısı hala varsayılan boyuttur. – xr280xr

+0

Tekrar denedim ve işe yaradı. Ne değiştiğini bilmiyorum. – xr280xr

+1

Bağlantı şimdi [burada] (http://getbootstrap.com/customize/). Css'nin başlangıcına hala çok fazla normalizasyon ekledim, ancak güvenli bir şekilde silebilir (html'den img'ye, css'yi .img yanıtından başlayarak). –

5

Eğer ön yükleme alanı 3 kullanarak İnternet'e: CSS dahil sonra

JSnippet DEMO and Source code

Source code in a github gist

JS kullanımı tamamen aynıdır:

<!-- Button HTML (to Trigger Modal) --> 
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a> 

<!-- Modal HTML --> 
<div id="myModal" class="modal fade"> 
    <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">Confirmation</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Do you want to save changes you made to document before closing?</p> 
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
      </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> 
    </div> 
</div>

kaynak

2015-05-27 20:05:04

+0

tam olarak aradığım şey! – Dinesh

İlgili konular

 İlgili konular