Schließen Sie das Popup, wenn Sie nur auf das Popup klicken?

Ich habe eine Schaltfläche erstellt, die ein Fenster öffnet, ich habe es mit einer JavaScript-Funktion gemacht und möchte, dass es geschlossen wird, wenn ich irgendwo anders klicke als auf das Popup-Fenster. Ich habe versucht, dies zu tun, aber es schließt das Pop-up, wenn ich auf das Pop-up selbst klicken bitte helfen!Schließen Sie das Popup, wenn Sie nur auf das Popup klicken?


 

 
body{ 
 
     \t overflow-y:scroll; 
 
     \t padding: 0; 
 
     \t margin: 0; 
 
     
 
     } 
 
     .wrapper{ 
 
     \t width: 960px; margin: 40px auto; text-align: left; 
 
     } 
 
     .popup-position{ 
 
     \t display: none; 
 
     \t position: fixed; 
 
     \t top: 0; 
 
     \t left: 0; 
 
     \t background-color: rgba(0,0,0,0.7); 
 
     \t width: 100%; 
 
     \t height: 100%; 
 
     } 
 
     #popup-wrapper{ 
 
     \t width: 500px; 
 
     \t margin: 70px auto; 
 
     \t text-align: left; 
 
     } 
 
     #popup-container{ 
 
     \t background-color: #FFF; 
 
     \t padding: 20px; 
 
     \t border-radius: 4px; 
 
     }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>adfadf</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link href="cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <script type="text/javascript"> 
 
    <!-- 
 
    function toggle_visibility(id) { 
 
     var e = document.getElementById(id); 
 
     if (e.style.display == 'block') 
 
     e.style.display = 'none'; 
 
     else 
 
     e.style.display = 'block'; 
 
    } 
 

 
    function closePopup(id) { 
 
     var e = document.getElementById(id); 
 
     if (e.style.display == 'block') 
 
      e.style.display = 'none'; 
 
     } 
 
     //--> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="popup-box1" class="popup-position" onclick="closePopup('popup-box1');"> 
 
    <div id="popup-wrapper"> 
 
     <div id="popup-container"> 
 

 
     <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">close</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <a class="btn btn-primary" href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Open popup box 1</a> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2016-07-12 ssabin

Nun, Sie eingestellt haben '# Popup-box1' zu schließen auf Klick ... – gcampbell

ich tat es dies nur schließen, wenn ich irgendwo – ssabin

Sie eine & Höhe Overlay div mit geringer Opazität volle Breite hinter dem Popup setzen,

So können Sie Popup, wenn Anwender auf diesem div schließen.

Quelle

2016-07-12 08:32:55

Ihr onclick-Ereignis innerhalb von # popup-container sprudelt bis zu Ihrer # popup-box1.

Versuchen Sie, Ihren # Popup-Wrapper mit diesem Onclick zu aktualisieren.

<div id="popup-wrapper" onclick='var event = arguments[0] || window.event; event.stopPropagation();'>

Ihr Beispiel mit meinem Update unten.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>adfadf</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link href="cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <script type="text/javascript"> 
 
    <!-- 
 
    function toggle_visibility(id) { 
 
     var e = document.getElementById(id); 
 
     if (e.style.display == 'block') 
 
     e.style.display = 'none'; 
 
     else 
 
     e.style.display = 'block'; 
 
    } 
 

 
    function closePopup(id) { 
 
     var e = document.getElementById(id); 
 
     if (e.style.display == 'block') 
 
      e.style.display = 'none'; 
 
     } 
 
     //--> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="popup-box1" class="popup-position" onclick="closePopup('popup-box1');"> 
 
    <div id="popup-wrapper" onclick='var event = arguments[0] || window.event; event.stopPropagation();'> 
 
     <div id="popup-container"> 
 
     <p>click me</p> 
 
     <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">close</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <a class="btn btn-primary" href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Open popup box 1</a> 
 
    </div> 
 

 
</body> 
 

 
</html>

würde ich diesen Onclick-Code in Ihrem Skript-Tag bewegen, aber das sollte man auf dem richtigen Weg zu bekommen.

Quelle

2016-07-12 08:41:26 fjoe

OK klicken werde ich dank warten, – ssabin

Meinst du sowas? Weil ich dein Snippet starte und was ich sehe, ist kein Popup.

(function($) { 
 
    $('.btn-open-modal').on('click', function() { 
 
    var target = $(this).data('target'); 
 
    $(target).addClass('in'); 
 
    }); 
 

 
    $('.modal').on('click', function(e) { 
 
    //Check whether click on modal-content 
 
    if (e.target !== this) 
 
     return; 
 

 
    $(this).removeClass('in'); 
 
    }); 
 
})(jQuery);

body { 
 
    font-size: 14px; 
 
    background: #808080; 
 
} 
 
.backgroung-deep-blue { 
 
    background: #34495e; 
 
} 
 
.wrapper { 
 
    max-width: 60em; 
 
    margin: 0 auto; 
 
} 
 
.content { 
 
    position: relative; 
 
    padding: 20px; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    overflow: hidden; 
 
} 
 
.main-content { 
 
    margin: 0; 
 
    font: 1em/1.5em'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 
    min-height: 120px; 
 
} 
 
/*Button*/ 
 

 
.btn { 
 
    margin: 15px; 
 
    padding: 10px 25px; 
 
    letter-spacing: 1px; 
 
    font-size: 18px; 
 
    font-weight: 600; 
 
    cursor: pointer; 
 
    background: none; 
 
    border: 3px solid #fff; 
 
    color: #fff; 
 
    background: #0090C0; 
 
    opacity: 1; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.btn:hover { 
 
    opacity: 0.8; 
 
} 
 
.btn:focus { 
 
    outline: none; 
 
} 
 
/*------End Common CSS-------*/ 
 

 
.modal { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    /*Default hide*/ 
 
    opacity: 0; 
 
    /*Default transparent*/ 
 
    background-color: black; 
 
    /* Fallback color */ 
 
    background: rgba(0, 0, 0, 0.4); 
 
    /* Background with opacity*/ 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.modal.in { 
 
    opacity: 1; 
 
    /*Toggle visible*/ 
 
    z-index: 1; 
 
    /*On top*/ 
 
} 
 
.modal.in .animated-from-top, 
 
.modal.in .animated-from-bottom { 
 
    -webkit-transform: translateY(0); 
 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    -o-transform: translateY(0); 
 
    transform: translateY(0); 
 
    /*Toggle position*/ 
 
} 
 
.modal-content { 
 
    position: relative; 
 
    max-width: 40em; 
 
    margin: 5em auto; 
 
    padding: 2em; 
 
    background: #ffffff; 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.animated-from-top { 
 
    -webkit-transform: translateY(-200%); 
 
    -moz-transform: translateY(-200%); 
 
    -ms-transform: translateY(-200%); 
 
    -o-transform: translateY(-200%); 
 
    transform: translateY(-200%); 
 
    /*Default over top*/ 
 
} 
 
.animated-from-bottom { 
 
    -webkit-transform: translateY(200%); 
 
    -moz-transform: translateY(200%); 
 
    -ms-transform: translateY(200%); 
 
    -o-transform: translateY(200%); 
 
    transform: translateY(200%); 
 
    /*Default over bottom*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <section class="content"> 
 
    <button class="btn btn-open-modal" data-target="#modal-from-top">From Top</button> 
 
    <button class="btn btn-open-modal" data-target="#modal-from-bottom">From Bottom</button> 
 
    </section> 
 
</div> 
 
<!--/wrapper--> 
 
<div class="modal" id="modal-from-top"> 
 
    <div class="modal-content animated-from-top"> 
 
    <p class="main-content"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
</div> 
 
<!--/modal-from-top--> 
 
<div class="modal" id="modal-from-bottom"> 
 
    <div class="modal-content animated-from-bottom"> 
 
    <p class="main-content"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
</div> 
 
<!--/modal-from-bottom--> 
 
<!-- Orginal Pen: http://codepen.io/trungk18/pen/dXVmEE -->

Quelle

2016-07-12 08:48:38 trungk18

Ja ich habe gerade meinen Code bearbeitet und CSS hinzugefügt. – ssabin

@ssabin: Bevorzugen Sie jQuery auf Ihrem Code? Also, was Sie archivieren möchten, ist gleich nachdem das Popup geöffnet ist, müssen Sie auf die Außenseite klicken, um es zu verbergen? – trungk18

Es macht mir nichts aus, jquery auf meinem Code zu haben, aber ich möchte nur, wenn ich außerhalb des Popups klicke, dass es geschlossen wird – ssabin

Schließen Sie das Popup, wenn Sie nur auf das Popup klicken?

Antwort

Verwandte Themen