Schließen Sie pop-up-div, indem Sie außerhalb der it

Ich bin ein absoluter Anfänger in der Programmierung. Ich habe die Suche für eine Antwort, aber keine von denen, die ich gefunden habe, scheint mein problem zu lösen. Ich benutzte die wie kann ich die center-javascript-css-popup-div, egal welche Bildschirm-Auflösung? pop-up-div-Methode erklärt, in der Frage.

Ist es möglich, schließen Sie ein div, indem Sie außerhalb der Sie mit kleinen änderungen, die den folgenden 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 habe ich die Anzahl der versteckte divs mit den ids dialog1, dialog2 und so weiter. Wenn ein link geklickt wird, wird das div-Element zeigt, und, um es zu schließen verwende ich eine img link:

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

poste deinen code, um die Antwort zu erhalten
Der code ist im link, den ich gepostet!!!
Als starter Sie müssen einen Weg der Registrierung ein Mausklick auf das Dokument und schließen das popup von dort. Ohne deinen code das ist, wie weit ich gehen kann
Ich bin mit dem gleichen code, der im link! Aber ich werde es hier posten! Danke!!!

InformationsquelleAutor Kristine | 2013-05-31

javascript popup

10

Beim öffnen der pop-up-erstellen Sie ein unsichtbares div mit Höhe-Breite 100%, die liegt auf der Rückseite des pop-up-div.

Befestigen Sie eine onclick-Funktion auf die div:
```
document.getElementById('invisibleDiv').onclick = function()
{
    document.getElementById('popup').style.display = 'none'; 
}
```
Hoffe, das hilft
- Ich danke Ihnen sehr! Ich Schreibe wieder, nachdem ich es überprüfen!
- Hei! Vielen Dank, es hat geklappt! Ich habe zwei Methoden, die erste war: ich Hinzugefügt jede Funktion closePopUp für jeden div #Abdeckung, aber das war viel zu lange und die Möglichkeit ist viel besser! Sorry, für die Beantwortung erst jetzt!
- Das ist toll! Auch können Sie annehmen/upvote es.
- Fertig! Ich kann nur annehmen,nicht upvote weil ich begann, über diese Website vor kurzem! Vielen Dank für Ihre Zeit und wissen!
- Jederzeit und jedes mal. 🙂
InformationsquelleAutor SHANK

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
});

InformationsquelleAutor mpen

Ohne Erstellung eines unsichtbaren div nur mit javascript:

fügen Sie diese:

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');
    }
};

Danke, ich werde es überprüfen!
Die Vermeidung der unsichtbare div-sieht interessant aus, aber was ist, wenn ein element in die Seite Stoppt die Vermehrung der Veranstaltung, es würde brechen popup automatisch schließen, Nein?

InformationsquelleAutor sjkm

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

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>

Erstellen Sie jetzt die andere Taste für das Fenster zu schließen, pop-up, und fügen Sie diesen spezifischen code für schließen:

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

oder

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

InformationsquelleAutor Mirko Cianfarani

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.