Html 从消息容器中删除模糊
我为正文应用了模糊，但我想为消息容器删除它。我怎么做？求你了，我需要你的帮助，我在寻找解决方案上浪费了太多时间。 在关闭按钮上，消息消失，主体的模糊被移除。 我唯一的问题是模糊属性应用于消息容器。 如果成功之前全身都是正常的。所有的改变都是在成功之后Html 从消息容器中删除模糊,html,css,django,django-templates,Html,Css,Django,Django Templates,我为正文应用了模糊，但我想为消息容器删除它。我怎么做？求你了，我需要你的帮助，我在寻找解决方案上浪费了太多时间。 在关闭按钮上，消息消失，主体的模糊被移除。 我唯一的问题是模糊属性应用于消息容器。 如果成功之前全身都是正常的。所有的改变都是在成功之后 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scal
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<style>
#card {
position: absolute;
top:30px;
width: 340px;
margin:-5px 0 0 -400px;
display: block;
text-align: center;
font-family: Arial;
}
#upper-side {
padding: 2em;
background-color: #3CB371;
display: block;
color: #fff;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
#checkmark {
font-weight: lighter;
fill: #fff;
margin: -3.5em auto auto 20px;
}
#status {
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
margin-top: -.2em;
margin-bottom: 0;
}
#lower-side {
padding: 2em 2em 5em 2em;
background: #F0F0F0;
display: block;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#message {
font-family: Arial;
margin-top: -.5em;
color: #757575;
letter-spacing: 1px;
}
.button {
background-color:#333;
font-family: Arial;
color: white;
padding-top: 14px;
padding-right: 32px;
padding-bottom: 14px;
padding-left: 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: -5px 0 0 320px;
cursor: pointer;
font-weight: bold;
align-items:center;
-webkit-border-radius: 10px;
border:1px solid #333;
border-bottom-width: 3px;
box-shadow: 2px 2px 3px 2px #4747471;
}
h1{
font-weight: normal;
margin: 0;
font-size: 31px;
}
.text{
padding: 20px 0;
float: left;
}
.text p{
padding-left: 320px;
width:450px;
}
.text-img{
float: right;
height: 470px;
width: 353px;
background: url("{% static 'landingpage.jpg'%}");
padding: 0 10px;
box-sizing: border-box;
font-family: Arial;
}
.text-img h2{
color: white;
margin: 0;
font-size: 14px;
margin-top: 100px;
}
.text-img p{
color: white;
margin: 0;
font-size: 14px;
}
.text-img input{
display: block;
width: 96%;
}
.text-img input[type="email"]{
background: #333;
border: 0;
padding: 5px;
border-radius: 5px;
margin-top: 5px;
color: white;
}
.text-img input[type="email"]::-webkit-input-placeholder{
color: #587974;
}
.text-img input[type="email"]:-moz-placeholder{
color: #587974;
}
.text-img input[type="email"]::-moz-placeholder{
color: #587974;
}
.text-img input[type="email"]:-ms-input-placeholder {
color: #587974;
}
.text-img input[type="submit"]{
float: right;
margin-top: 30px;
width: 50%;
}
.clearfix{
clear: both;
}
footer p{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 12px 0;
font-size: 14px;
}
</style>
<body>
<div>
<center><img src="{% static 'Neoticlogo.png'%}" height="130px" alt="Logo"></center>
<h1 style="text-align: center;">
<font face="Arial" color=" #587974">Beat the markets with AI </font>
</h1>
</div>
<br/>
<br/>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<div class="text">
<p style=" color:#EDEDED; font-family: Arial; font-size:12; " align="justify"> Neotic is a trading support platform that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing any single line of code.</p>
<p style=" color:#EDEDED; font-family: Arial; font-size:12;" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news.</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:14; " align="justify"> We are upgrading our services and revamping our brand</p> </b>
<form>
<input type='button' class='button' id='run' value= 'Access our old platform' onclick="window.location.href='http://www.dailystockselect.com/'" />
</form>
</div>
<div class="text-img" >
<h2>Trader or investment fund?</h2>
<p>Leave your email to be notified when the new service is ready.</p>
<form action="/subscribe/" method="POST">
{% csrf_token %}
<input name="email" type="email" placeholder="Your email" required/>
<input type="submit" value="I am interested">
</form>
{% if success %}
<body id="overlay" style="filter: blur(2px);" >
<div id="messageContainer" >
<div id='card' class="animated fadeIn">
<div id='upper-side'>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="checkmark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<path d="M131.583,92.152l-0.026-0.041c-0.713-1.118-2.197-1.447-3.316-0.734l-31.782,20.257l-4.74-12.65
c-0.483-1.29-1.882-1.958-3.124-1.493l-0.045,0.017c-1.242,0.465-1.857,1.888-1.374,3.178l5.763,15.382
c0.131,0.351,0.334,0.65,0.579,0.898c0.028,0.029,0.06,0.052,0.089,0.08c0.08,0.073,0.159,0.147,0.246,0.209
c0.071,0.051,0.147,0.091,0.222,0.133c0.058,0.033,0.115,0.069,0.175,0.097c0.081,0.037,0.165,0.063,0.249,0.091
c0.065,0.022,0.128,0.047,0.195,0.063c0.079,0.019,0.159,0.026,0.239,0.037c0.074,0.01,0.147,0.024,0.221,0.027
c0.097,0.004,0.194-0.006,0.292-0.014c0.055-0.005,0.109-0.003,0.163-0.012c0.323-0.048,0.641-0.16,0.933-0.346l34.305-21.865
C131.967,94.755,132.296,93.271,131.583,92.152z" />
<circle fill="none" stroke="#ffffff" stroke-width="5" stroke-miterlimit="10" cx="109.486" cy="104.353" r="32.53" />
</svg>
<h3 id='status'>
Success
</h3>
</div>
<div id='lower-side'>
<p id='message'>
Thank you for your interest in Neotic.
</p>
<div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right" onclick="$('#card').hide(); body.style.filter = 'none' ;">X</a>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</body>
</html>
#卡片{
位置：绝对位置；
顶部：30px；
宽度：340px；
裕度：-5px0-400px；
显示：块；
文本对齐：居中；
字体系列：Arial；
}
#上边{
填料：2米；
背景色：#3CB371；
显示：块；
颜色：#fff；
边框右上角半径：8px；
边框左上半径：8px；
}
#对勾{
字体重量：较轻；
填充：#fff；
保证金：-3.5em自动20px；
}
#地位{
字体重量：较轻；
文本转换：大写；
字母间距：2px；
字号：1em；
边缘顶部：-.2米；
页边距底部：0；
}
#下侧{
填充物：2米2米5米2米；
背景：#f0；
显示：块；
边框右下半径：8px；
边框左下半径：8px；
}
#信息{
字体系列：Arial；
边缘顶部：-.5em；
颜色：#7575；
字母间距：1px；
}
.按钮{
背景色：#333；
字体系列：Arial；
颜色：白色；
填充顶部：14px；
右边填充：32px；
填充底部：14px；
左侧填充：32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
余量：-5px0320px；
光标：指针；
字体大小：粗体；
对齐项目：居中；
-webkit边界半径：10px；
边框：1px实心#333；
边框底宽：3倍；
盒影：2个2个3个2个#471；
}
h1{
字体大小：正常；
保证金：0；
字体大小：31px；
}
.文本{
填充：20px0；
浮动：左；
}
.文本p{
左侧填充：320px；
宽度：450px；
}
.text img{
浮动：对；
高度：470px；
宽度：353px；
背景：url（“{%static'landingpage.jpg%}”）；
填充：0 10px；
框大小：边框框；
字体系列：Arial；
}
.文本img h2{
颜色：白色；
保证金：0；
字体大小：14px；
边缘顶部：100px；
}
.text img p{
颜色：白色；
保证金：0；
字体大小：14px；
}
.文本img输入{
显示：块；
宽度：96%；
}
.text img输入[type=“email”]{
背景：#333；
边界：0；
填充物：5px；
边界半径：5px；
边缘顶部：5px；
颜色：白色；
}
.text img输入[type=“email”]：：-webkit输入占位符{
颜色：#587974；
}
.text img输入[type=“email”]：-moz占位符{
颜色：#587974；
}
.text img输入[type=“email”]：：-moz占位符{
颜色：#587974；
}
.text img输入[type=“email”]：-ms输入占位符{
颜色：#587974；
}
.text img输入[type=“submit”]{
浮动：对；
边缘顶部：30px；
宽度：50%；
}
.clearfix{
明确：两者皆有；
}
页脚p{
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
填充：12px0；
字体大小：14px；
}
用人工智能击败市场
Neotic是一个交易支持平台，允许交易员利用人工智能测试交易策略并提供相关交易建议，而无需编写任何代码。
人工智能基于一种机器学习算法，结合了公司基本面、历史价格和金融新闻。
我们正在升级我们的服务并重塑我们的品牌
交易员还是投资基金？
当新服务准备就绪时，请留下电子邮件通知您
{%csrf_令牌%}
{%if success%}
成功
感谢您对Neotic的兴趣。
{%endif%}
{% if success %}
<body>
<div id="messageContainer">
<div id="overlay" style="filter: blur(2px);">
<div id='card' class="animated fadeIn">
<div id='upper-side'>
...
<h3 id='status'>
Success
</h3>
</div>
<div id='lower-side'>
<p id='message'>
Thank you for your interest in Neotic.
</p>
<div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right" onclick="$('#card').hide(); body.style.filter = 'none' ;">X</a>
</div>
</div>
{%if success%}
...
成功
感谢您对Neotic的兴趣。
我正在做的是：设置另一个
divblurmessagecontainerbodydivdiv