无法使用 javascript 使窗口淡出或在 css 中添加过渡效果
fadeOut为了在关闭窗口弹出消息时添加效果，我一直在使用该功能时遇到问题。
同时，我尝试在 CSS 中为 div 添加过渡效果，但也没有成功。我的想法是将这种淡化效果添加到ifJavaScript 部分的语句中，但这不起作用。
.window {
position: fixed;
border-width: 0px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
padding: 0px;
background: url(images/blue-abstract-noise-free-website-background-image.jpg);
border-radius: 12px;
width: 476px;
height: 276px;
opacity: 1;
z-index: 1;
box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);
}
.layover {
background-color: rgba(100, 99, 92, 0.699);
position: absolute;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
border-radius: 12px;
}
.h2 {
position: absolute;
left: 12px;
font-weight: 900;
font-size: 20px;
color: white;
font-family: sans-serif;
}
.yesandno {
height: 80px;
width: 250px;
position: absolute;
top: 200px;
left: 217px;
}
.yes {
display: inline-block;
position: absolute;
height: 30px;
width: 80px;
margin: 0px;
left: 100px;
}
.yes>button {
display: block;
cursor: pointer;
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
height: 100%;
width: 100%;
color: white;
font-weight: 900;
font-size: 13px;
font-family: sans-serif;
opacity: 1;
z-index: 2;
background-color: rgba(129, 127, 127, 0.808);
}
.no {
display: inline-block;
position: absolute;
height: 30px;
width: 80px;
margin: 0px;
right: 300px;
}
.no>button {
display: block;
cursor: pointer;
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
height: 100%;
width: 100%;
color: white;
font-weight: 900;
font-size: 13px;
font-family: sans-serif;
opacity: 1;
z-index: 2;
background-color: rgba(129, 127, 127, 0.808);
}
.langmessage {
position: absolute;
top: 80px;
text-align: center;
font-weight: 900;
font-size: 13px;
font-family: sans-serif;
color: white;
left: 10px;
right: 10px;
}
三国纷争浏览 121回答 1
1回答
-
神不在的星期二
为了使用该fadeOut()方法，您必须将其包含jQuery到您的项目中，但您也可以使用纯 JavaScript 自己手动对其进行编程。以下是两种解决方案，一种使用jQuery，另一种使用 plain javascript。jQuery解决方案：注意：如果使用jQuery，您可以将部分代码重写document.getElementById("win")为 just$("#win")等，但这超出了问题的范围。var lang = navigator.language;if ("" + lang == "es-US") { var div = document.getElementById("win");}var buttonn = document.getElementById("buttonn");buttonn.onclick = function() { var div = document.getElementById("win"); if (div.style.display !== "none") { $("#win").fadeOut(); }}.window { position: fixed; border-width: 0px; top: 0; right: 0; left: 0; bottom: 0; margin: auto; padding: 0px; background: url(images/blue-abstract-noise-free-website-background-image.jpg); border-radius: 12px; width: 476px; height: 276px; opacity: 1; z-index: 1; box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);}.layover { background-color: rgba(100, 99, 92, 0.699); position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; border-radius: 12px;}.h2 { position: absolute; left: 12px; font-weight: 900; font-size: 20px; color: white; font-family: sans-serif;}.yesandno { height: 80px; width: 250px; position: absolute; top: 200px; left: 217px;}.yes { display: inline-block; position: absolute; height: 30px; width: 80px; margin: 0px; left: 100px;}.yes>button { display: block; cursor: pointer; margin: 0px; padding: 0px; border: 0px; border-radius: 8px; height: 100%; width: 100%; color: white; font-weight: 900; font-size: 13px; font-family: sans-serif; opacity: 1; z-index: 2; background-color: rgba(129, 127, 127, 0.808);}.no { display: inline-block; position: absolute; height: 30px; width: 80px; margin: 0px; right: 300px;}.no>button { display: block; cursor: pointer; margin: 0px; padding: 0px; border: 0px; border-radius: 8px; height: 100%; width: 100%; color: white; font-weight: 900; font-size: 13px; font-family: sans-serif; opacity: 1; z-index: 2; background-color: rgba(129, 127, 127, 0.808);}.langmessage { position: absolute; top: 80px; text-align: center; font-weight: 900; font-size: 13px; font-family: sans-serif; color: white; left: 10px; right: 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container"> <div class="window" id="win"> <div class="layover"> <div class="h2"> <h2>Oops!</h2> </div> <div class="yesandno"> <figure class="yes"> <button onclick="window.location.href= 'espanol.html';">Si</button> </figure> <figure class="no"> <button onclick id="buttonn">No</button> </figure> </div> <div class="langmessage"> Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web? </div> </div> </div></div>香草 JavaScript 解决方案：var lang = navigator.language;if ("" + lang == "es-US") { var div = document.getElementById("win");}var buttonn = document.getElementById("buttonn");buttonn.onclick = function() { var div = document.getElementById("win"); if (div.style.display !== "none") { fadeOutPopup(); }} function fadeOutPopup() { var elem = document.getElementById("win"); var fade = setInterval(function () { if (!elem.style.opacity) { elem.style.opacity = 1; } if (elem.style.opacity > 0) { elem.style.opacity -= 0.2; } else { clearInterval(fade); } }, 50);}.window { position: fixed; border-width: 0px; top: 0; right: 0; left: 0; bottom: 0; margin: auto; padding: 0px; background: url(images/blue-abstract-noise-free-website-background-image.jpg); border-radius: 12px; width: 476px; height: 276px; opacity: 1; z-index: 1; box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);}.layover { background-color: rgba(100, 99, 92, 0.699); position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; border-radius: 12px;}.h2 { position: absolute; left: 12px; font-weight: 900; font-size: 20px; color: white; font-family: sans-serif;}.yesandno { height: 80px; width: 250px; position: absolute; top: 200px; left: 217px;}.yes { display: inline-block; position: absolute; height: 30px; width: 80px; margin: 0px; left: 100px;}.yes>button { display: block; cursor: pointer; margin: 0px; padding: 0px; border: 0px; border-radius: 8px; height: 100%; width: 100%; color: white; font-weight: 900; font-size: 13px; font-family: sans-serif; opacity: 1; z-index: 2; background-color: rgba(129, 127, 127, 0.808);}.no { display: inline-block; position: absolute; height: 30px; width: 80px; margin: 0px; right: 300px;}.no>button { display: block; cursor: pointer; margin: 0px; padding: 0px; border: 0px; border-radius: 8px; height: 100%; width: 100%; color: white; font-weight: 900; font-size: 13px; font-family: sans-serif; opacity: 1; z-index: 2; background-color: rgba(129, 127, 127, 0.808);}.langmessage { position: absolute; top: 80px; text-align: center; font-weight: 900; font-size: 13px; font-family: sans-serif; color: white; left: 10px; right: 10px;}<div class="container"> <div class="window" id="win"> <div class="layover"> <div class="h2"> <h2>Oops!</h2> </div> <div class="yesandno"> <figure class="yes"> <button onclick="window.location.href= 'espanol.html';">Si</button> </figure> <figure class="no"> <button onclick id="buttonn">No</button> </figure> </div> <div class="langmessage"> Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web? </div> </div> </div></div>
随时随地看视频慕课网APP
相关分类
JavaScript