Schließen Sie popup-div, wenn geklickt

Ich habe ein popup-div, das zeigt nur beim klicken der Taste. Er selbst verbirgt sich beim anklicken auf den gleichen Knopf. Mein problem ist, ich möchte auch ausblenden, div, wenn geklickt wird irgendwo außerhalb. Ich bin nicht in der Lage zu tun, weil das popup-div ist innerhalb der main-wrapper-Klasse und können nicht so tun, indem Sie mithilfe von click-Ereignis auf die wrapper-Klasse und machen es zu verbergen.
Das ist mein code:

function showHide() {
    var ele = document.getElementById("div_fieldWorkers");

    if (ele.style.display == "block") {           
        ele.style.display = "none";
    } else {
        ele.style.display = "block";      
    }
}

<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="return showHide();" class="btn btn-primary" />
  • Zeigen Sie uns Ihre markup
  • Fügen Sie den html-code und js-code für das popup auch.
  • Konnte Sie auch teilen Sie Ihre markup?
  • <div id="div_fieldWorkers" style="display:none;" class="form_size"></div> dieses div-Element enthält ein Formular ausgefüllt werden, durch den Benutzer, aber es ist in der main-wrapper-Klasse.
  • wrapper-Klasse ist in der master-Seite
InformationsquelleAutor Manu | 2013-09-30
  1. 1

    Check this out: http://jsfiddle.net/d4SsZ/1/

    Überarbeitet: http://jsfiddle.net/d4SsZ/3/

    Nur ein Ausschnitt: Überprüfen Sie, für null und undefined js-Fehler wenn keine.

    Markup:

    <div id="div_fieldWorkers" class="form_size" style='display:none;' class='noclick'><span class='noclick'>Hello How are you?</span></div>
<input
    type="button"
    value="Add Field Worker"
    id="btnFieldWorkers"
    class="btn btn-primary" />

    Javascript: 

     $('#btnFieldWorkers').bind("click", ToggleDisplay);

function ToggleDisplay() {
    if ($("#div_fieldWorkers").data('shown'))
        hide();
    else 
        display();
}

function display() {    
    if ($("#div_fieldWorkers").children().length > 0) {
        $("#div_fieldWorkers").fadeIn(500, function() {
            $(document).bind("click", function() {hide(); });            
            $("#div_fieldWorkers").data('shown', true)});         
    }  
}

function hide() {   
    if (window.event.toElement.className != 'noclick') {
        $("#div_fieldWorkers").fadeOut(500, function() {
            $(document).unbind("click");
            $("#div_fieldWorkers").data('shown', false);                
        });
    }
}
    • Wow.. es geklappt.. vielen Dank.. 🙂
    • wenn ich auf innerhalb des div.. es wird versteckt.. ich möchte wenn der Benutzer innerhalb des div.. es doesnot verstecken sich
    • Prüfen Sie das jsfiddle.net/d4SsZ/3 added Einfach Klasse wie noclick und onhide übersprungen das click-Ereignis. Es kann eine gute Vorgehensweise sein, als diese. Zeit: es wird für Sie arbeiten.
    InformationsquelleAutor Vishal Vaishya
  2. 1

    Hatte das gleiche problem, kam mit dieser einfachen Lösung. Es ist auch arbeitet rekursiv:

    $(document).mouseup(function (e)
{

var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) //if the target of the click isn't the container...
    && container.has(e.target).length === 0) //... nor a descendant of the container
{
    container.hide();
}
});
    InformationsquelleAutor Waseem Khan
  3. 0

    Die Lösung für dieses problem ist hier:
    Nutzen jQuery zum ausblenden eines DIV, wenn der Benutzer klickt außerhalb des

    Auch, Sie hat diese Frage jquery, aber dein code ist reines javascript. Bei der Verwendung von jQuery, kann man nur schreiben

    $('#div_fieldWorkers').toggle();

    in Ihrem onclick.

    • ja.. aber es hat nicht funktioniert mit diesem code. problem ist, dass der popup-div ist innerhalb der main-wrapper-Klasse. Immer wenn ich Feuer auf Ereignis außerhalb des div(d.h. auf wrapper-Klasse), es zu verbergen, es funktioniert überhaupt nicht. Es ist vorrangig auf die wrapper-Klasse klicken Sie auf Ereignis und damit das div immer verborgen bleiben.
    InformationsquelleAutor lort
  4. 0

    Erstellen click-Ereignis auf dem body-element und stopPropagation. das macht das Ereignis zu nennen, das click-event nur auf den button. Überprüfen Sie, dass die auf Ziel-element nicht den popup-div. Beispiel:

    $(function(){
   $("#btnFieldWorkers").click(function(e){       
       e.stopPropagation();
       $("#div_fieldWorkers").show();
       $("body").click(function(e){
           if(e.target.id != "div_fieldWorkers")
           {
               $("#div_fieldWorkers").hide();
               $("body").unbind("click");
           }
       });
   });

});

    jsfiddle

    • wenn ich auf innerhalb des div.. es wird versteckt.. ich möchte wenn der Benutzer innerhalb des div.. es doesnot selbst verstecken, denn er enthält ein Formular ausgefüllt werden, indem der Benutzer
    • siehe jsFiddle link. Es soll ja nicht verschwinden es. zeig mir deinen code
    InformationsquelleAutor Dvir
  5. -1

    Können Sie auch ausblenden, die pop-up, indem Sie auf pop-up-div.Für diese müssen Sie klicken Sie auf die Funktion im div-tag.In das click-Funktion, die Sie haben zu schreiben, die in der Nähe der pop-up-Funktion.

    • Nicht die OP ausdrücklich, dass dies nicht die gewünschte Lösung?
    InformationsquelleAutor user5119520
Schreibe einen Kommentar