我为模式编写并复制了一小段 JavaScript,并将其添加到我的 main.js 文件中,但它似乎不起作用。
它可以在 jsfiddle 上运行,但不能在我的机器上运行:https://jsfiddle.net/281wr3c6/13/
由于某种原因它似乎不在我的机器上
var modal = document.getElementById("theModal");
var btn = document.getElementById("trigger");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
div.onclick = function() {
modal.display.style = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.display.style = "none";
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(11,12,12,0.66);
}
.modal.bg {
padding:30px;
float: left;
z-index: 0;
border: none;
border-radius: 0;
margin: 18px 0;
}
.modal .card {
border: 4px solid #dee0e2;
padding:24px;
float: left;
margin: 18px 0;
z-index: 10;
background: #fff;
}
.modal .title {
width: 90%;
display: inline-block;
}
.modal h3 {
margin-top:0;
}
.modal div.buttons button.btn {
margin-bottom: 0!important;
}
.modal div.buttons button.btn.secondary {
margin-left: 0!important;
float: left;
}
.modal div.buttons button.btn.primary {
margin-right: 0!important;
float: right;
}
.modal div.close {
background-image: url("../assets/icons/close.svg");
display: inline-block;
height: 18px;
width: 18px;
padding: 3px;
float: right;
}
<button id="trigger" class="btn primary">Open modal</button>
<div id="theModal" class="cd-box modal bg">
<div class=card>
<div class="title">
<h3>Title</h3>
</div>
<div class="close"></div>
<div class="inside">
<p>This is some content that goes into the modal. The width adjusts according to the content.</p>
</div>
<div class="buttons">
<button class="btn secondary">Exit</button>
<button class="btn primary">Continue with action</button>
</div>
</div>
</div>
我从这里得到了代码:https://www.w3schools.com/howto/howto_css_modals.asp
当我在他们的 fiddle /预览中运行我的代码时,它确实有效,所以让我认为这是我的网站没有运行的东西?
最佳答案
我对您的代码进行了一些修改,现在它可以在此 JSFiddle 中运行:
https://jsfiddle.net/9ajsnx21/13/
Javascript
var modal = document.getElementById("theModal");
var btn = document.getElementById("trigger");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.display.style = "none";
}
}
HTML
<button id="trigger" class="btn primary">Open modal</button>
<div id="theModal" class="cd-box modal bg">
<div class="modal-content">
<div class="title">
<h3>Title</h3>
</div>
<span class="close">×</span>
<div class="inside">
<p>This is some content that goes into the modal. The width adjusts according to the content.</p>
</div>
<div class="buttons">
<button class="btn secondary">Exit</button>
<button class="btn primary">Continue with action</button>
</div>
</div>
</div>
CSS
body {font-family: Arial, Helvetica, sans-serif;}
/* 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;
}
您使用的 JavaScript 大部分都很好,我将“div”更改为“span”。
主要问题是您似乎没有包含任何样式。包括您提供的示例中的样式使其可以正常工作。
关于javascript - 我的 JavaScript 模式无法从触发按钮打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51962679/