在不破坏父对象的情况下似乎无法关闭此模式吗？
[英]Can't seem to close this modal without destroying the parent as well?
问题描述
当页面加载且该部分工作正常时，我正在打开模式。 问题是，当我单击它关闭时，它也会擦除父页面。 看我的小提琴
https://jsfiddle.net/L8vk0frg/
<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</head>
<style>
.cookieBtn {
font-size: 12px;
cursor: pointer;
background-color: #A02525;
color: white;
padding: 5px 5px;
border: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 5px;
}
.cookieBtn:hover {
background-color: #761010;
}
.cookieWrapper {
border-radius: 10px;
background-color: white;
width: 400px;
height: 175px;
padding: 10px;
-webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
z-index: 999;
}
</style>
<body>
<p>text on page</p>
<div id="cookieWrapper" class="cookieWrapper" title="Dialog" onClick="parentNode.remove()" align="center">
<iframe src="rndcookie.asp" width="392" height="150" scrolling="no" frameborder="0" style="border-radius: 10px;"></iframe>
<button class="cookieBtn" onclick="" data-dismiss="cookieWrapper" type="button">ACCEPT ALL COOKIES</button>
</div>
<script>
window.onload = function () {
document.getElementById('button').onclick = function () {
document.getElementById('cookieWrapper').style.display = "none"
};
};
</script>
1 个解决方案
解决方案1
1 已采纳 2019-05-27 07:31:42
有两个问题：
- 您没有带ID
button元素 - 您的
<p>标签和其他标签消失的原因是因为onClick="parentNode.remove()"
演示
window.onload = function() { document.getElementById('button').onclick = function() { document.getElementById('cookieWrapper').style.display = "none" }; };
.cookieBtn { font-size: 12px; cursor: pointer; background-color: #A02525; color: white; padding: 5px 5px; border: none; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); border-radius: 5px; } .cookieBtn:hover { background-color: #761010; } .cookieWrapper { border-radius: 10px; background-color: white; width: 400px; height: 175px; padding: 10px; -webkit-box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75); z-index: 999; }
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <body> <p>text on page</p> <div id="cookieWrapper" class="cookieWrapper" title="Dialog" align="center"> <iframe src="rndcookie.asp" width="392" height="150" scrolling="no" frameborder="0" style="border-radius: 10px;"></iframe> <button class="cookieBtn" id="button" onclick="" data-dismiss="cookieWrapper" type="button">ACCEPT ALL COOKIES</button> </div>
单击“X”时似乎无法关闭模式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.