How can I make div not disappear when buttons are clicked
Question
So I have a page that fades in when a button is pressed, and the page has 3 font-awesome icons on it. And when you click anywhere on the page it fades it fades the page out. When you click the font-awesome icons on the page it takes you to another page. But the problem is that the page fades out when you click the buttons. I want it to only fade out when you click anywhere except on the font-awesome icons.
$(function() { $('#fadeContent').click(function(){ var bodyContent = $('#bodyContent') bodyContent.fadeIn(400); bodyContent.click(function() { $(this).fadeOut(400); }) }); });
body { background-color: black; font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color:black; } #bodyContent{ display:none; position:absolute; text-align: center; color: white; width:100%; height:100%; background:#454545; z-index: 100; } .fa-times{ position: absolute; top: 0px; right: 0px; font-size: 3em; margin-right: 2%; margin-top: 1.5%; } .fa-twitter, .fa-github, .fa-steam { display: inline-block; position: relative; color: white; border-radius: 100px; font-size: 3.5em; padding: .5em; border: 5px solid white; margin-top: 20%; margin-left: 1.5%; margin-right: 1.5%; } .fa-times:hover { color: #f06262; cursor: pointer; } .fa-twitter:hover, .fa-github:hover, .fa-steam:hover { background-color: #1dd2e2; cursor: pointer; } .home { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 20%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .about { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 37%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .projects { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 54%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .contact { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 71%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .home:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } .about:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } .projects:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } .contact:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel='stylesheet prefetch' href='http://rawgit.com/fralec/elegantShareJS/master/css/elegant.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <button class="home">Home</button> <button class="about">About</button> <button class="projects">Projects</button> <button id="fadeContent" class="contact">Contact</button> <div id="bodyContent"> <i class="fa fa-times" aria-hidden="true"></i> <a href="https://twitter.com/LukielD" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="https://github.com/LukieID" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="steamcommunity.com/id/LukieID" target="_blank"><i class="fa fa-steam" aria-hidden="true"></i></a> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script type="text/javascript" src="js/elegant.js"></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>
2 answers
solution1
1 ACCPTED 2017-03-30 18:11:43
Check if the clicked element has the font awesome class. If not, do the fade:
bodyContent.click(function(e) {
if(!$(e.target).hasClass('fa')) {
$(this).fadeOut(400);
}
})
Snippet:
$(function() { $('#fadeContent').click(function() { var bodyContent = $('#bodyContent') bodyContent.fadeIn(400); bodyContent.click(function(e) { if(!$(e.target).hasClass('fa')) { $(this).fadeOut(400); } }) }); });
body { background-color: black; font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color:black; } #bodyContent{ display:none; position:absolute; text-align: center; color: white; width:100%; height:100%; background:#454545; z-index: 100; } .fa-times{ position: absolute; top: 0px; right: 0px; font-size: 3em; margin-right: 2%; margin-top: 1.5%; } .fa-twitter, .fa-github, .fa-steam { display: inline-block; position: relative; color: white; border-radius: 100px; font-size: 3.5em; padding: .5em; border: 5px solid white; margin-top: 20%; margin-left: 1.5%; margin-right: 1.5%; } .fa-times:hover { color: #f06262; cursor: pointer; } .fa-twitter:hover, .fa-github:hover, .fa-steam:hover { background-color: #1dd2e2; cursor: pointer; } .home { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 20%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .about { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 37%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .projects { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 54%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .contact { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 71%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .home:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } .about:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } .projects:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } .contact:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel='stylesheet prefetch' href='http://rawgit.com/fralec/elegantShareJS/master/css/elegant.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <button class="home">Home</button> <button class="about">About</button> <button class="projects">Projects</button> <button id="fadeContent" class="contact">Contact</button> <div id="bodyContent"> <i class="fa fa-times" aria-hidden="true"></i> <a href="https://twitter.com/LukielD" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="https://github.com/LukieID" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="steamcommunity.com/id/LukieID" target="_blank"><i class="fa fa-steam" aria-hidden="true"></i></a> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script type="text/javascript" src="js/elegant.js"></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>
solution2
0 2017-03-30 18:17:59
You should register click event on each icon and cancel further event handling by calling stopPropagation method.
Exsample:
$(".fa").click(function(e) {
e.stopPropagation();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?
How can I create a triangle div with CSS which will disappear when clicked but not when the 'overflow' part is clicked?
How do I get DIV to disappear when another DIV is clicked?
How to make text appear and disappear when a div is clicked on?
How to make div disappear when correct answer is clicked?
How can I make a div fade out when it is clicked?
How to make boxes disappear when clicked in javascript?
make a link that when clicked disappear and show a div instead
Setting a div to an array so i can make things disappear / re-appear based on buttons
How can I make buttons flash different background colors when clicked/
Related Tags