Javascript 把莫代尔带到前面
嘿，我试图把这个模式带到页面上其他元素的前面。 我已经试过z-index:-1 然后我想在AdobeMuse网站上实现这段代码，并使modal从组合框的选择中获得一个元素。 谢谢你的帮助Javascript 把莫代尔带到前面,javascript,modal-dialog,Javascript,Modal Dialog,嘿，我试图把这个模式带到页面上其他元素的前面。 我已经试过z-index:-1 然后我想在AdobeMuse网站上实现这段代码，并使modal从组合框的选择中获得一个元素。 谢谢你的帮助 <!DOCTYPE html> <html> <head> <style> /* The Modal (background) */ .modal { display: none; /* Hidden by default */ positio
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* 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 */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</p>
</div>
</div>
<script>
// 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";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// 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("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；前部；/*保持原位*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：600px；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
z指数：1；/*位于顶部*/
}
/*模态内容*/
.模态内容{
背景色：#00A1E0；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：511px；
高度：250px；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：蓝色；
文字装饰：无；
光标：指针；
部门背景{
边框：0px纯黑；
div{
背景色：#00A1E0；
宽度：511px；
}
}
变速箱{
利润率：30像素；
背景色：#00A1E0；
边框：1px纯黑；
不透明度：15%；
宽度：511；
过滤器：α（不透明度=100）；
}
变速箱{
利润率：5%；
字体大小：粗体；
颜色：#000000；
}
添加到购物卡
#myBtn{颜色：#00A1E0；}
部门背景{
边界：0px#00A1E0；
div{
背景色：#00A1E0；
宽度：511px；
}
}
变速箱{
利润率：30像素；
背景色：#FF530D；
颜色：#00A1E0；
不透明度：80%；
宽度：200；
过滤器：α（不透明度=100）；
}
变速箱{
利润率：5%；
字体大小：粗体；
颜色：#00A1E0；
}
#myModal{背景：；}
×
您已将经典名片添加到购物车中
//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
{
document.getElementById（“resultSection”）.style.fontSize=“350%”；
document.getElementById（“resultSection”）.innerHTML=“”+结果；
}
#myBtn{
位置：相对位置；
字体大小：34px；
}
.modal{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持在前面的位置无效-可能会破坏您的css，因此被删除*/
填充顶部：100px；/*长方体的位置-不知道这有什么作用？如果要将模态向下移动100px，则只需将顶部更改为100px并移除此项*/
左：0；
右：0；/*全宽（左和右0）*/
排名：0；
底部：0；/*全高顶部和底部0*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
z-index:9999；/*位于顶部-高于站点中的任何其他z-index*/
}
您的
.close:hoverfocusdiv.background位置：fixed；front；#myBtn{background color:#00A1E0；color:gray；}