Schließen Sie das Pop-up div, indem Sie darauf klicken

Ich bin ein absoluter Anfänger in der Programmierung. Ich habe nach einer Antwort gesucht, aber keine von denen, die ich gefunden habe, scheint mein Problem zu lösen.Schließen Sie das Pop-up div, indem Sie darauf klicken

Ich habe die [how do I center javascript css popup div, no matter what the screen resolution?] Pop-up-Div-Methode in der Frage erläutert. Ich frage mich: Ist es möglich, ein div zu schließen, indem man mit kleinen Änderungen im folgenden Code darauf klickt?

Vielen Dank im Voraus!

Mein Code:

<script type="text/javascript"> 
    function showPopUp(el) { 
     var cvr = document.getElementById("cover") 
     var dlg = document.getElementById(el) 
     cvr.style.display = "block" 
     dlg.style.display = "block" 
     if (document.body.style.overflow = "scroll") { 
      cvr.style.width = "1024" 
      cvr.style.height = "100%" 
     } 
    } 
    function closePopUp(el) { 
     var cvr = document.getElementById("cover") 
     var dlg = document.getElementById(el) 
     cvr.style.display = "none" 
     dlg.style.display = "none" 
     document.body.style.overflowY = "scroll" 
    } 
</script> 
<style type="text/css"> 
    #cover { 
     display:  none; 
     position:  fixed; 
     left:   0px; 
     top:   0px; 
     width:   100%; 
     height:   100%; 
     background:  gray; 
     filter:   alpha(Opacity = 50); 
     opacity:  0.5; 
     -moz-opacity: 0.5; 
     -khtml-opacity: 0.5 
    } 

</style>

In html, ich habe die Anzahl der divs mit der ids "Dialog1" versteckt "Dialog2" und so weiter. Wenn ein Link angeklickt wird, zeigt die div und um es zu schließen verwende ich einen img Link:

< a class="close" href="#2" onclick="closePopUp('dialog2');">< img src="/img/close.png" height="30px"></a >

Quelle

2013-05-31 Kristine

poste deinen Code, um die Antwort zu erhalten – Kingk

Der Code ist in dem Link, den ich gepostet habe! – Kristine

Als Starter benötigen Sie eine Möglichkeit, einen Mausklick auf das Dokument zu registrieren und dann das Popup von dort zu schließen. Ohne Ihren Code ist das so weit wie ich gehen kann –

Wenn Sie die Pop-up öffnen, erstellen eine unsichtbare div der Höhe Breite 100%, das auf der Rückseite liegt der Ihr Pop-up-div.

Bringen Sie eine Onclick Funktion zum div:

document.getElementById('invisibleDiv').onclick = function() 
{ 
    document.getElementById('popup').style.display = 'none'; 
}

Hoffnung, die

Quelle

2013-05-31 09:54:07 SHANK

Vielen Dank! Ich werde zurückschreiben, nachdem ich es überprüft habe! – Kristine

Hei! Vielen Dank, es hat funktioniert! Ich habe zwei Methoden ausprobiert, zuerst war: Ich habe jede closePopUp Funktion für jedes div #cover hinzugefügt, aber das war viel zu lang und Ihr Weg ist viel besser! Entschuldigung für die Antwort jetzt nur! – Kristine

Das ist großartig! Sie können auch akzeptieren/upvote es. – SHANK

, ohne ein unsichtbares div nur mit Javascript hilft:

hinzufügen:

function getOffset(el) { 
    var _x = 0; 
    var _y = 0; 
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
     _x += el.offsetLeft - el.scrollLeft; 
     _y += el.offsetTop - el.scrollTop; 
     el = el.offsetParent; 
    } 
    return { top: _y, left: _x }; 
} 

// function to check intersection rectangle <-> point 
function intersects(ax1, ay1, ax2, ay2, px, py) { 
    return !(ax2 < px || ax1 > px || ay2 < py || ay1 > py); 
} 

document.onclick = function(event) { 
    var dialog = document.getElementById('dialog'); 
    var offset = getOffset(dialog); 
    var ax1 = offset.left; 
    var ay1 = offset.top; 
    var ax2 = ax1 + 300 /* dialog width */; 
    var ay2 = ay1 + 300 /* dialog height */; 

    if(!intersects(ax1, ay1, ax2, ay2, event.pageX, event.pageY)) { 
     closePopUp('dialog'); 
    } 
};

Quelle

2013-05-31 10:00:51 sjkm

Danke, ich werde es überprüfen! – Kristine

Ja ... Wichtig Sie entfernen das Overlay und das ist <div class="ui-widget-overlay ui-front"></div> w Henne verwenden die Jquery 2.0.0.js ... (Es kann sein, dass mit den bisherigen Bibliotheken den Namen ändern)

Beispiel ...

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script> 

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
    <script type="text/javascript"> 
// <---- VENTAÑAS DE PARAMETERES----> 
$(document).ready(function() { 
$("#wnd_Paramedit").dialog({ 
       autoOpen: false, 
       height: 'auto', 
       width: 405, 
       modal: true, 
       resizable:false, 
       buttons: { 
        "Accept": function() { 


         $(this).dialog("close");  
        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
        } 
       }, 
       close: function() { 
        $(this).dialog("close"); 
       } 
      }); 

      $("#btn_Pedit").click(function() { 
        $("#wnd_Paramedit").dialog("open"); 
$("div").removeClass("ui-widget-overlay ui-front"); 
       }); 
}); 
</script> 
<body> 
<h3>List of parameters</h3> 
<div id="sortparam" > 


</div> 
<input type="button" id="btn_Pedit" value="Edit"/> 
<div id="wnd_EditParam" title="Edit Parameter"></div> 
</body> 
<div id="wnd_Paramedit" title="Choose parameter" > 
    <label> inserta el nombre del Parameter que quiere modificar<label><br /> 
    <label> ID <input type=text size=30 id="med"></label>  
</div> 
</html>

Jetzt können Sie die andere bestimmte Taste schließen Sie das Fenster erstellen Pop-up und Sie fügen Sie diesen spezifischen Code für nahe:

$("#wnd_Paramedit").dialog("close");

oder

$("#wnd_Paramedit").dialog("destroy");

Quelle

2013-05-31 10:12:46

var $popup = $('#your-popup'); 

$('body').on('click', function(ev) { 
    $popup.hide(); // click anywhere to hide the popup; all click events will bubble up to the body if not prevented 
}); 

$popup.on('click', function(ev) { 
    ev.stopPropagation(); // prevent event from bubbling up to the body and closing the popup 
});

Quelle

2015-01-28 20:05:58 mpen

Schließen Sie das Pop-up div, indem Sie darauf klicken

Antwort

Verwandte Themen