3弹出div单击外部以关闭

时间：2020-09-02 07:44:44

标签： javascript

我有3个打开onclick的弹出div。首先，您在它关闭的div内单击，我修复了该问题。然后我找到了一个代码，可在div之外单击，它将关闭div。因此，我编辑了该代码，如果您在div之外单击它，则它可以正常工作。因此，我将该代码添加到了所有3个代码中，现在在div之外没有单击可关闭工作。我不明白为什么会这样，因为我是Java脚本编码的新手。如果有人可以帮助我，我将非常感谢。谢谢

function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
// Prevents menu from closing when clicked inside 
        document.getElementById("myPopup").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        }); 
// Closes the menu in the event of outside click 
        window.onclick = function(event) { 
            if (!event.target.matches('.amount')) { 
              
                var dropdowns =  
                document.getElementsByClassName("tooltiptext"); 
                  
                var i; 
                for (i = 0; i < dropdowns.length; i++) { 
                    var openmyPopup = dropdowns[i]; 
                    if (openmyPopup.classList.contains('show')) { 
                        openmyPopup.classList.remove('show'); 
                    } 
                } 
            } 
        } 


        
function myFunctions() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("shows");
}
// Prevents menu from closing when clicked inside 
        document.getElementById("mypopup").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        });
// Closes the menu in the event of outside click 
        window.onclick = function(event) { 
            if (!event.target.matches('.furbm')) { 
              
                var dropdowns =  
                document.getElementsByClassName("tooltipstext"); 
                  
                var i; 
                for (i = 0; i < dropdownss.length; i++) { 
                    var openmypopup = dropdowns[i]; 
                    if (openmypopup.classList.contains('shows')) { 
                        openmypopup.classList.remove('shows'); 
                    } 
                } 
            } 
        }


function myFunctionss() {
var popup = document.getElementById("mYpopup");
popup.classList.toggle("showS");
}
// Prevents menu from closing when clicked inside 
        document.getElementById("mYpopup").addEventListener('click', function (event) { 
            event.stopPropagation(); 
        });

    // Closes the menu in the event of outside click 
        window.onclick = function(event) { 
            if (!event.target.matches('.furbc')) { 
              
                var dropdowns =  
                document.getElementsByClassName("toolstiptext"); 
                  
                var i; 
                for (i = 0; i < dropdowns.length; i++) { 
                    var openmYpopup = dropdowns[i]; 
                    if (openmypopup.classList.contains('showS')) { 
                        openmypopup.classList.remove('showS'); 
                    } 
                } 
            } 
        }
/******************************************************************************************************************************************************Header*/
.s-header {
background-color: red; 
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}

.s-header-inner {
background-color: red; 
border: 1px solid red;
height: 63px;
margin: auto;
width: 95%;
}

.s-header-links-left {
float: left;
margin-top: 12px;
}   

/********************************************************************************************************************************************************Logo*/
.s-logo { 
height: 65px;
position: absolute; 
width: 150px;    
}

.s-logo img {
position: absolute;     
width: 185px;
}

/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
float: right;
margin-top: 20px;
}

.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}

.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}

.tooltip { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

.tooltip .tooltiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 205px;
z-index: 1;
}

/* Toggle this class - hide and show the popup */
.tooltip .show {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s; 
}

/***************************************************************************************************************************************Fur Baby Of The Month*/
.furbm {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}

.furbm .fa-trophy {
color: red!important;
font-size: 18px!important;
}

.furbm .fa-trophy:hover {
color: red!important;
font-size: 18px!important;
}

.tooltips { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

.tooltips .tooltipstext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -215px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: center;
visibility: hidden;
width: 205px;
z-index: 1;
}

.tooltips .shows {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s; 
}

.tooltipstext img {
height: 150px;
margin-top: 20px;
width: 150px
}

/***************************************************************************************************************************************Fur Baby Contest*/
.furbc {
cursor: pointer;
}

.furbc .fa-comments {
color: red!important;
font-size: 20px!important;
}

.furbc .fa-comments:hover {
color: #ffffff!important;
font-size: 20px!important;
}

.toolstip { 
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}

.toolstip .toolstiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -281px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 275px;
z-index: 1;
}

.toolstip .showS {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s; 
}

.furbcf form {
display: flex;
position: relative;
width: 100%;
}

.furbcf input[type=text] {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0px;
padding: 5px 5px;
width: 175px;
}

.furbcf input:focus { 
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}

.furbcf textarea {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0;
padding: 5px 5px;
width: 175px;
}

.furbcf textarea:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}

.furbcf input[type="submit"] {
background-color: #ffffff;  
border: 2px solid #da291c;   
border-radius: 5px;
box-sizing: border-box; 
color: #da291c; 
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300; 
outline: none;
padding: 5px;  
width: 100px;   
}

.furbcf input[type="submit"]:hover {
background-color: #da291c;    
border: 2px solid #da291c; 
border-radius: 5px;
box-sizing: border-box; 
color: #ffffff;  
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
padding: 5px;    
width: 100px;
}

/********************************************************************************************************************************************************Menu*/
i.fa-bars {
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
margin-left: 25px;
}

i.fa-bars:hover {
color: #ffffff;
font-size: 20px;
margin-left: 25px;
}

.sidenav {
border-left: 1px solid #ccd1d4;
background-color: #ffffff;
height: 100%;   
overflow-x: hidden;
padding-top: 50px;  
position: fixed;    
right: -1px;
top: 0; 
transition: 0.5s;  
width: 0;
z-index: 1; 
}

.sidenav p {
color: #242527;
display: block; 
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;   
padding: 12px 8px 0px 32px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}

.sidenav a {
color: #242527!important;
display: block!important;   
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important; 
padding: 3px 8px 3px 32px!important;
text-decoration: none!important;
transition: 0.3s!important;
}

.sidenav a:hover {
color: #242527!important;
display: block!important;   
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important; 
padding: 3px 8px 3px 32px!important;
text-decoration: underline!important;
transition: 0.3s!important;
}

.sidenav a img {
height: 12px;
margin-left: -0px;
margin-right: 10px;
}

.sidenav .closebtn {
color: #aaaaaa!important;
font-size: 34px!important;  
margin-left: 50px!important;    
position: absolute!important;
right: 23px!important;
top: 5px!important;
}

.sidenav .closebtn:hover {
color: #353748!important;
font-size: 34px!important;  
margin-left: 50px!important;    
position: absolute!important;
right: 23px!important;
text-decoration: none!important;
top: 5px!important;
}
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunctions()" title="Contest Winner">
<div class="furbm">
<i class="fa fa-trophy"></i>
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month Contest -->
<span class="toolstip" onclick="myFunctionss()">
<div class="furbc">
<i class='fas fa-comments'></i>
</div>
<span class="toolstiptext" id="mYpopup">
Enter Octobers cutest Fur Baby contest and win a bag of your Fur Babies food of choice.
</br>
</br>
<form class="furbcf" method="post" action="send_contact.php" enctype="multipart/form-data">
<label for="first_name">First Name: <font color="red">*</font></label>
</br>
<input type="text" id="first_name" name="first_name" autocomplete="off" required>
</br>
</br>
<label for="last_name">Fur Babies Name: <font color="red">*</font></label>
</br>
<input type="text" id="last_name" name="last_name" autocomplete="off" required>
</br>
</br>
<label for="email">Email: <font color="red">*</font></label>
</br>
<input type="text" id="email" name="email" autocomplete="off" required>
</br>
</br>
<input type="file" name="uploaded_file"autocomplete="off" required>
</br>
</br>
<input type="submit" name="Submit" value="Submit">
</form>
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span style="cursor:pointer" onclick="openNav()" title="Menu">
<i class="fa fa-bars"></i>
</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<p>WHO WE ARE:</p>
<a href="https://www.capebretoncares.com/Start" target="_top">Home</a>
<a href="https://www.capebretoncares.com/p/about-us/" target="_blank">About Us</a>
<a href="https://www.capebretoncares.com/p/privacy-policy/" target="_blank">Privacy Policy</a>
<a href="https://www.capebretoncares.com/p/terms-of-use/" target="_blank">Terms of Use</a>
<p>RESOURCES:</p>
<a href="https://www.capebretoncares.com/p/contact/" target="_blank">Contact Us</a>
<a href="https://www.capebretoncares.com/p/FAQ/" target="_blank">FAQ</a>
<a href="https://www.capebretoncares.com/p/donations/" target="_blank">Our Donations</a>
<a href="https://www.capebretoncares.com/p/spread-the-word/" target="_blank">Spread The Word</a>
<p>KEEP IN TOUCH:</p>
<a href="https://www.facebook.com/CapeBretonCares/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/facebook.png">Facebook</a>
<a href="https://twitter.com/WeCapersCare/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/twitter.png">Twitter</a>
<p>AVAILABLE ON:</p>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/brave.png">Brave</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/chrome.png">Google Chrome</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/edge.png">Microsoft Edge</a>
<a href="https://addons.mozilla.org/en-CA/firefox/addon/cape-breton-start-page/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/firefox.png">Mozilla Firefox</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>

0 个答案:

没有答案
相关问题
最新问题