【发布时间】：2021-01-12 07:53:59
【问题描述】：
我使用的是 Hugo 0.74 版
我已经建立了一个简码：
- 使用我指定的文本创建一个按钮
- 打开一个由 getform.io 组成的模式窗口
一切正常，预计会有一个小故障：
我必须按两次按钮才能打开模式窗口
我已经在 Chrome、Firefox 和 Edge 中尝试过这个，我需要点击两次才能打开它。
我哪里错了？
{{$text := .Get "text"}}
<button id="id_reachout" style="background:#28A745;color:white;font-family: 'Varela Round';" onClick="showModal();"> {{$text}} </button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="row">
<div class="modal-column" style="border: 5px double red">
<img src="/img/MyModal.png" alt="Alternate text" class="modal-image">
</div>
<div class="modal-column">
<form action="https://getform.io/f/4804d94b-8f1q-4a05-a679-7da0ba070952" method="POST">
<label for="id_name" class="modal-label"> Name </label>
<input type="text" name="name" id="id_name" class="modal-input">
<label for="id_email" class="modal-label"> Email </label>
<input type="email" name="email" id="id_email" class="modal-input">
<label for="id_message" class="modal-label"> Message </label>
<textarea name="message" id="id_message" class="modal-textarea"> </textarea>
<input id="id_submit" class="modal-submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
在我的 MyArticle.md 文件中，我将此短代码称为：
{{<modal_button text="I have some more questions related to assets!">}}
我的 custom.js 文件是：
function showModal() {
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("id_reachout");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on 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";
}
}
}
最后这是我的 css 文件：
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
display:block;
background-color: #fefefe;
margin: 5% auto; /* 5% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
height: 80%;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-label {
display:block;
margin-top:20px;
letter-spacing: 2px;
font-weight:bold;
}
.modal-input {
width: 439px;
height: 27px;
background: #efefef;
border: 1px solid #dedede;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #3a3a3a;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.modal-input:focus {
border: 2px solid #5DADE2;
}
.modal-textarea {
width: 439px;
height: 200px;
background: #efefef;
border: 1px solid #dedede;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #3a3a3a;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.modal-submit {
width: 439px;
height: 35px;
background: #efefef;
border: 1px solid #dedede;
font-size: 0.9em;
color: #3a3a3a;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#submit {
width: 127px;
height: 60px;
text-indent: -9999px;
border: none;
cursor: pointer;
}
#submit:hover {
opacity: .9;
}
.row {
display: flex;
}
.modal-column {
flex:50%;
padding:10px;
}
.left-column{
font-size:2rem;
}
【问题讨论】：
标签： javascript html css markdown hugo