i have created bell notification icon clicking on modal window opens. want fade modal window in , out through css. i've done coding modal window not fading in fading out properly. here code..
function showmodal() { document.getelementsbyclassname('modaloverlay')[0].style.display = "block"; document.getelementsbyclassname('modaloverlay')[0].style.opacity = 1; } function hidemodal() { document.getelementsbyclassname('modaloverlay')[0].style.opacity = 0; settimeout(function(){document.getelementsbyclassname('modaloverlay')[0].style.display = "none"}, 300); }#bellnotification { line-height: 100%; position: fixed; top: 0; right: 10%; font-size: 40px; color: gold; } #bellnotification:hover { cursor: pointer; } #bellnotification:hover #subscribetooltip { visibility: visible; opacity: 1; margin-top: 60px; } #subscribetooltip { visibility: hidden; position: absolute; padding: 7px 15px 5px 15px; background-color: #fff; color: #1a1a1a; font-size: 17px; font-family: 'palanquin'; margin-top: 70px; opacity: 0; transform: translatex(-50%); margin-left: 20px; transition: 0.2s ease-in; } #subscribetooltip:hover { cursor: default; opacity: 0 !important; margin-top: 70px !important; visibility: hidden !important; } #triangleup { position: relative; width: 0; height: 0; border-bottom: 10px solid white; border-left: 5px solid transparent; border-right: 5px solid transparent; margin: 0 auto; margin-top: -17px; } .modaloverlay { display: none; position: fixed; top: 0; left: 0; z-index: 9999; background-color: rgba(0,0,0,0.8); width: 100%; height: 100%; color: black; opacity: 0; transition: opacity 0.3s ease-in; } .modaloverlay #window { width: 50%; min-height: 200px; background-color: white; font-family: 'titillium'; box-shadow: 0 0 10px #000; position: relative; top: 50%; margin: 0 auto; box-sizing: border-box; padding: 20px 30px; transform: translatey(-50%); } .modaloverlay input { color: #4d4d4d; font-family: 'palanquin'; }<div id="bellnotification" onclick="showmodal();">bell-icon <div id="subscribetooltip"><div id="triangleup"></div>subscribe for our newsletter</div> <i class="fa fa-bell"></i> </div> <div class="modaloverlay" onclick="hidemodal()"> <div id="window"> lorem ipsum dolor sit amet.<br /> <input type="email" placeholder="enter email subscribe our newsletter" /><input type="button" value="proceed" /> </div> </div>where problem? can't find. you'll see modal window not functioning properly. clicking anywhere disappearing modal window. i'll make later. first want know why not fading in??
try use css animations instead of property transitions. see this: https://developer.mozilla.org/en-us/docs/web/guide/css/using_css_animations
Comments
Post a Comment