包含DIV到“;封面“;包含元素
Containing DIV to "cover" contained elements
我有这样的HTML:
<div id="cover" on-tap="_overlayTapped" class$="{{status}}">
<form method="POST" action="/some/action">
<input required id="name" name="name" label="Your name"></input>
<input required id="surname" name="surname" label="Your name"></input>
<button type="submit">Click!</button>
</form>
</div>
我想添加Javascript或样式,以便div #cover
将:
1) 模糊其内容。例如,当表单加载(通过AJAX)一些默认值时,我希望包含的内容"模糊"(我想是#container
的不透明度),但我也不希望人们能够点击字段。
2) 将#cover
转换为"模态",这意味着点击它将有效地等待点击以尝试重新加载数据(如果调用失败)
使用"包含"div是否实际上不可能做到这一点?我意识到,当我点击一个字段时,事件就会出现在字段本身,然后它就会冒泡到容器中。。。我是不是搞错了?
我不太确定你想做什么,但我为你做了这个,请检查这是否是你想要的。单击按钮打开模态,它框将出现,其他内容将变模糊。
这是代码:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
document.getElementById("blurit").style.filter = "blur(4px)";
document.getElementById("blurit").style.WebkitFilter = "blur(4px)";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
document.getElementById("blurit").style.filter = "blur(0)";
document.getElementById("blurit").style.WebkitFilter = "blur(0)";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById("blurit").style.filter = "blur(0)";
document.getElementById("blurit").style.WebkitFilter = "blur(0)";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="blurit">
<p>Test it</p>
<img src="https://static.pexels.com/photos/909/flowers-garden-colorful-colourful.jpg" alt="Pineapple" width="500" height="300"><br><br>
<button onclick="myFunction()" id="myBtn">Try it</button>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
相关文章:
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- WebGL错误-错误:WebGL:bindBuffer:buffer已包含元素数据
- 如何在 jQuery 的 hover() 事件的热点中包含元素的边距
- jQuery将事件处理程序绑定到具有包含元素的多个元素
- 如何从包含
元素的 javascript 变量中获取单元格数据 - Jquery 查找响应是否包含元素
- 如何创建包含
元素值的数组 - Javascript Garbarge 集合,其中包含包含C++元素的对象
- Javascript 过程,用于提高元素的 z 索引,直到它高于其所有包含元素的 1
- 包含元素的数组的长度 = 0
- 如果查询搜索包含元素,如何返回布尔值
- 将选中绑定与包含元素上的单击绑定相结合
- 如何使用Javascript隐藏和显示鼠标悬停在包含元素上的元素
- 我如何通过id检查我的DOM是否已经包含元素
- CSS使图像具有与包含元素相同的高度
- 在一个溢出:隐藏的包含元素上改变焦点,移动它,但造成不明显的差异
- 使用jQuery或JavaScript访问表单中的元素(或其他包含元素)
- jQuery/Javascript:由AJAX请求拉入的HTML不包含