Dinamik olarak oluşturulan bir div ortalamak nasıl?

3 Cevap php

Benim javascript automated validation script için bir div oluşturmak. Bu aşağıda kod ile oluşturulur:

var alertbox = document.createElement("div");

Şimdi ne ben o hem yatay hem de dikey olarak programlama div ortalamak mı?

Note: Currently I am showing an alert box but once i know how to center a div, i will replace the alertbox with this dynamically generated div which will also provide some lightbox-like effect.

Teşekkürler

Not: Başvuru için, bu senaryonun en son sürümünü indirebilirsiniz here.

Please note that i dont want to use external css for this because this is validation script and it should be able to do it programatically. For example: using something like this can be helpful:

 alertbox.style.position: whatever
 ....

3 Cevap

Bu statik içeriğe sahip olurdu gibi aynı CSS kurallarını uygulayarak meselesi. Temelde div auto için bir sabit ve set sol ve sağ kenar boşluklarını vermek - in this article açıklandığı gibi yatay merkezleme elde edilebilir. Dikey merkezleme biraz daha zordur - birkaç yaklaşım here ve bu ayrıntılı tartışılmıştır this blog post.

Tidiest yolu merkezleme önemser bir CSS sınıf tanımlamak ve sonra bu gibi dinamik olarak oluşturulan elemanına bu sınıfı uygulamak için muhtemelen:

alertbox.className = "myCssClass";

Update: Since you are already using JavaScript for creating the div, you could of course use it for the centering as well (in combination with CSS absolute positioning) - that would actually probably be a cleaner solution (due to the hackishness of the CSS vertical centering). Exactly how you do this depends a bit on what tools you are using - it's probably much easier to achieve with a JS framework such as Prototype or jQuery than with "raw" JavaScript since browsers handle window/browser heights a bit differently.

JQuery kullanıyorsanız, neden validation plugin kullanmak değil mi?

Sen (SimpleModal) gibi kalıcı bir pencere ile birleştirmek gerekir.

Eğer zaten yaptıklarını değiştirmek istemiyorsanız Ama, böyle bir şey deneyin:

Ben sadece (I sayfa kapsar ve üstüne Alertbox koyar bir bindirme dahil ettik) konumlandırmak için div bazı CSS kuralları geçerli olacaktır:

Note : içinizde içeriği ile div boyutlarını almak gerekir çünkü div uzak sola konumlandırılmış nedenidir. Bir gizli div sıfır bir yüksekliğe ve genişliğe sahip olacak. Büyüklüğü belirlendikten sonra, bu sayfanın merkezini hesaplar ve div konumlandırır.

CSS

#overlay {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 background: #000;
 opacity: 0.8;
 filter: alpha(opacity=80);
 z-index: 100;
}
#alertbox {
 background: #444;
 padding: 10px;
 position: absolute;
 left: -99999px;
 top: 0;
 z-index: 101;
}

Senaryo

function alertBox(alertMsg){
 // Add overlay
 $('<div id="overlay"></div>')
  .hide()
  .appendTo('body')
  .fadeIn('slow');
// Add alert
 $('<div id="alertbox"></div>')
  .html(alertMsg)
  .appendTo('body');
// calculate & position alertbox in center of viewport
 var abx = $('#alertbox');
 var abxTop = ($(window).height() - abx.height())/2;
 var abxLft = ($(window).width() - abx.width())/2;
 abx
  .hide()
  .css({ top: abxTop, left: abxLft })
  .fadeIn('slow');
// add click to hide alertbox & overlay
  $('#overlay, #alertbox').click(function(){
   $('#overlay, #alertbox').fadeOut('slow',function(){
     $('#alertbox').remove();
     $('#overlay').remove();
   });
  })
}

Sebebi ne olursa olsun, ben ortalamak için mümkün değil, bir DIV margin-right kullanarak margin-left. Ne bulduk daha iyi çalışır (biraz globby kod, ama bu benim için çalışıyor) bir tablo içinde onları saklanması etmektir. Ve aşağıdaki gibi marjı değiştirmek için DOM tarzı bir nesne kullanabilirsiniz:

<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>

etiketler