wie man DIV auf andere Divs

Lade ich meinen code auf jsFiddle, da siehst du es.

Wenn Sie auf den link klicken, die versteckten FAQ-Bereich wird sich zeigen, und Sie schieben andere divs nach unten. Aber das ist nicht das, was ich will, ich brauche alle anderen divs bleiben, wo Sie sind, und meine versteckte FAQ Sektion schwimmen auf der Oberseite. Nicht sicher, wie es zu tun. Auch nicht sicher, ob dies durchgeführt werden soll in HTML, CSS oder jQuery.

Mein jQuery-code:

$(function(){
    $(".OpenTopMessage").click(function () {
        $("#details").slideToggle("slow");
    });
});

HTML-code:

<div style="border: 1px solid #000;">
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div id="faqBox">
   <table width="100%">
<tr><td><a href="#" id="openFAQ" class="OpenTopMessage">this is hte faq section</a></td>
</tr>
    </table>

    <div id="details" style="display:none">
    <br/><br/><br/><br/><br/><br/><br/><br/>
 the display style property is set to none to ensure that the element no longer affects the layout of the page
 <br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</div>
<br/><br/>
<div style="background:#c00;">other stuff heren the height reaches 0 after a hiding animation, the display style property is set to </div>

beim nächsten mal kann man auch die Krypta der css für eine einfache Lesung ?

InformationsquelleAutor qinking126 | 2012-11-17

3

Könnten Sie position:absolute auf die #details div.

Beispiel: http://jsfiddle.net/SrT2U/9/

Würden Sie brauchen, zu hantieren mit den margin um es zu bekommen, um line-up.

EDIT: Bemerken, dass Sie sich mit margin:0 auto; um den Mittelpunkt der FAQ-box. Sie müssen möglicherweise einen anderen Weg finden, um line-up der box.

EDIT 2:

Ich gemerkt, wenn Sie die FAQ-div in der #faqbox Tabelle und ändern Sie dann margin:0 auto; zu margin-top: 20px; margin-left:-16px; im #details div und es funktioniert alles gut.

Beispiel 2: http://jsfiddle.net/SrT2U/13/

NB: die Platzierung der div innerhalb der table wie so ist nicht code-Spezifikation, aber es funktioniert wieder zentrieren Sie die FAQ.

vielen Dank, ur-Lösung ist perfekt, nicht nur mein problem gelöst, passen auch auf div zentrieren.
Keine probs @feelexit! Glücklich zu helfen.

InformationsquelleAutor Jason Gennaro
3

Leicht zu beheben wäre, fügen Sie einfach position:absolute zu Ihrem faqBox div.

jsFiddle-Beispiel

Position:absolute nimmt das element aus dem Textfluss des Dokuments, und in diesem Fall, ermöglicht es, um zu erscheinen, on top von Ihrem anderen element und schieben Sie es nicht nach unten.

InformationsquelleAutor j08691
1

Wenn Sie möchten ein div-Element zu zeigen, bis auf andere Elemente ohne Veränderung anderer Positionen, die Sie brauchen, um es die CSS-Eigenschaft position absolut.

In Ihrer css Dateien Folgendes angeben:
```
#details{
    position: absolute;
    left: 100px;//your desired position as regard to the left of your window
    top: 100px;//your desired position as regard to the top of your window
}
```
Können Sie auch tun, dass mit Hilfe von jQuery wie folgt:
```
$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    $("#details").css("left", "40px/*some value*/");
    $("#details").css("top", "40px/*some value*/");
});
```
Wenn Sie wollen immer noch suchen Sie Ihre pop-up-box in der Mitte des Fensters, können Sie die jQuery verwenden, um es wie folgt.
```
$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    window_width = $(window).width(); //Get the user's window's width
    window_height = $(window).height(); //Get the user's window's height
    $("#details").css("left", (window_width-$("#details").width())/2);
    $("#details").css("top", (window_height-$("#details").height())/2);
});
```
Dann die box wird zentriert werden.

Außerdem werden Sie wahrscheinlich finden Sie Ihre Schaltfläche "dies ist die faq-Abschnitt" wird abgedeckt durch Ihre div, aber Sie können leicht aktivieren, schließen Sie das pop-up-Feld angezeigt, durch das hinzufügen einer Schaltfläche "schließen" oder fügen Sie den folgenden code:
```
$("body:not(#details)").click(function() {
    $("#details").slideToggle("slow");
});
```
Dies ermöglicht Ihnen, klicken Sie auf einem anderen Teil der Seite zu schließen, die gezielte div #details, außer für das div selbst.

In der Regel, wenn Sie versuchen, um ein pop-up-Fenster oder ein Dialogfeld, können Sie versuchen, eine andere vorgefertigte Plug-ins, einschließlich der jQuery UI (http://jqueryui.com/dialog/) oder blockUI (http://www.malsup.com/jquery/block/), von denen die erstere unterstützt nur die Dialoge, sondern diese unterstützt alle Arten von pop-up-Boxen.

InformationsquelleAutor ljhljh235

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.