javascript - Hugo - 简码 - 模态窗口
问题描述
我正在使用 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;
}
解决方案
showModal()
当用户单击按钮时,您正在调用。然而,该功能增加了另一个 onclick = function
- 要求用户点击两次。
showModal()
应该立即调用显示模态的逻辑,而不是附加另一个onclick
函数。
快速解决:
代替:
btn.onclick = function () {
modal.style.display = "block";
}
和:
if (modal.style.display != "block") {
modal.style.display = "block";
}
演示- 如果您愿意,您可以省略if
检查,如果您愿意,只需将其替换onclick
为modal.style.display = "block";
。
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];
if (modal.style.display != "block") {
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";
}
}
}
/* 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;
}
<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>
推荐阅读
- angular - VS Code 修复库的导入路径
- messagekit - 官方示例中消息左对齐和右对齐的条件在哪里?
- python - 用 python 和 Pandas 重塑多个变量
- python - 如何按回车键换行?
- visual-studio-code - 如何使用扩展定义并且不允许以与多个验证器兼容的方式附加属性(JSON 模式草案 7)?
- pandas - 在 Pandas 中分割一个系列
- c# - CS8804:如果存在具有顶级语句的编译单元,则无法指定 /main
- uml - 这个图可以代表一个迭代/集合中的每个吗?序列图还是活动图?
- c++ - Qt6 桌面应用程序和使用 cmake 的共享库
- flutter - 如何在颤动中悬停时更改 TextField?