小贝子编程

无法使用javascript使窗口淡入淡出或在css中添加过渡效果



我一直在使用fadeOut函数，以便在关闭窗口弹出消息时添加效果。

同时，我尝试在CSS中为div添加过渡效果，但也没有成功。我的想法是在JavaScript部分的if语句中添加这种褪色效果，但没有成功。

.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;
}
<body>
<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>
<script type="text/javascript">
var lang = navigator.language;
if ("" + lang == "es-US") {
var div = document.getElementById("win");
}
var button = document.getElementById("buttonn")
buttonn.onclick = function() {
var div = document.getElementById("win");
if (div.style.display !== "none") {
div.style.display = "none";
}
}
</script>
</body>

为了使用fadeOut()方法，您必须将jQuery包含到您的项目中，但您也可以使用纯javascript手动对其进行编程。以下是两种解决方案，一种使用jQuery，另一种使用普通javascript。

jQuery解决方案：

注意：如果使用jQuery，那么可以将document.getElementById("win")等代码的一部分重写为$("#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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium