如何解决如何使我的HTML,CSS和JavaScript弹出窗口具有响应性?
我一直在努力使html,CSS和JavaScript弹出窗口响应。我看过类似的文章和视频,但找不到适用于我的代码的任何内容。我绝对知道有可能使它具有响应能力!
任何帮助将不胜感激。 预先感谢!
我尝试过,但是没有用。
@media only screen and (max-width: 600px) {
.popup{
width:100%;
}
}
下面是我的弹出窗口代码
HTML
<div class='popup'>
<div class='cnt223'>
<div class="popupCloseButton">×</div>
<h1>Important Notice</h1>
<p>We were affected by the fire next door and will remain closed until further notice.</p>
</div>
</div>
JAVASCRIPT
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.popupCloseButton').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
/*--------CLOSE BUTTON--------*/
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
解决方法
我更改了一些CSS,它可以工作,请尝试:
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.popupCloseButton').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
@media only screen and (max-width: 600px) {
.popup{
width:calc(100% - 70px);
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{ width: calc(100% - 70px);
margin: 0 35px;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
display: flow-root;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
/*--------CLOSE BUTTON--------*/
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='popup'>
<div class='cnt223'>
<div class="popupCloseButton">×</div>
<h1>Important Notice</h1>
<p>We were affected by the fire next door and will remain closed until further notice.</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。