Bir
yüzer nasıl

1 Cevap php

Ben büyük bir projeye başlamadan ediyorum, ama çok başında ufacık bir konuda şaşırıp. Ben mümkün olduğunca kısa olması için çalışacağım.

I </body></html> bir demet önce (sayfa altbilgi içine son şeyler yankılanan olacak bir PHP komut dosyası var <div> s görünür düğmeleri ve <div> s içeren Gizli iletişim kutularını içeren.

Plan butonları sayfanın ana içerik alanında <div> s karşılık gelen sağ üst köşesinde yüzer sahip olmaktır. - yani düğme-1 altbilgi içine yankılandı içerik-box-1 köşesinde yüzer olacak ve gizli <div> 'diyalog-1' bağlı olacaktır.

Ben sayfada (ler) boyunca jQuery ve jQuery UI Dialog kullanarak olacak. Ben bu soruya özellikle ilgili olup olmadığından emin değilim, ama buna değer durumda sadece söz düşündüm.

Yani benim soru, basitçe nasıl PHP ile altbilgi içine <div class="button">Button 1</div> echo yok, ama sağ üst köşesinde yüzer var (ile belki 5px margin) <div class=content>Content 1 is full of content</div> arasında ?

Bir resim bin kelime diyor:

alt text

As shown above, I want the little blue gear button things in the corner of content pieces, locked and loaded with hidden <div>s containing dialog boxes. I've found plenty of info on how to float divs on top of divs, but all the examples I saw showed the <div>s in close proximity to each other in the page source; not with a hundred lines of source code between the two <div>s

Çözüm saf CSS, saf jQuery / jQueryUI veya ikisinin kombinasyonu olup olmadığından emin değilim.

Herhangi bir tavsiye çok takdir edilecektir.

Teşekkürler!

1 Cevap

Sen için yüzen konumunu ayarlamak isteyeceksiniz:

position:absolute;

Sonra 'dişli' yakınındaki bazı yere ve sol div üst set, size pozisyon yöntemi pozisyon alabilirsiniz.

var node = $('#gear');
var position = node.position();
var dialog = $("#dialog");
dialog.css("left", position.left);
dialog.css("top", position.top);
dialog.fadeIn("fast");

Buna benzer bir şey işe yarayabilir.

Dişli üzerinde göreceli ve o pozisyonu: Edit: Bu diyalog pozisyon dışında olacak bir yeniden boyutlandırma sonra bazı kusurları var onlar konumunu kullanmak, çünkü 'dişli' kadar yakın orijinal div görmek nedeni iletişim kesinlikle.

Bir eleman kesinlikle zaten göreceli ve mutlak konumlandırılmış bir elemanın içinde konumlandırılmış zaman şimdi ana eleman yerine pencere elemanın göreceli konumlandırılmış

Dialog # dişli div sol üst 10px göre yerleştirilmiştir:

<div style="position:relative" id="gear">
  <div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>

Dialog penceresinin sol üst göreli konumlandırılmış:

<div id="gear">
  <div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>

Görüntülenmeden önce dişli içinde bir pozisyon için iletişim kutusunu taşımak için hiçbir sebep muhtemelen yoktur, sadece dişli içindeki diyaloğu append, $ ("# dişli"). ($ ("# Diyalog")) append

etiketler