时间戳

首页 > 解决方案 > 如何与模式内的输入进行交互

javascript - 如何与模式内的输入进行交互

问题描述

页面加载时我有一个弹出模式。有两种方法：在 CSS 中将不透明度更改为 1 或使用 jQuery。

.popupmodal{
    display: block;
    line-height: 250%;
    font-size: 2.5vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.popupmodal:target{
    opacity: 1;
    pointer-events: auto;
}

.popupmodal > div{
    height: auto;
    width: 50%;
    position: relative;
    margin: 10% auto;
    padding: 3% 2% 3% 2%;
    background: #fff;
    border-radius: 1%;
}

.popup-modal-quest > div{
    background-color: transparent;
    margin: 1% auto;
    height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- <a href="#quest-modal" class="abrir-modal">You have a new quest. Click here to see.</a> -->

<p>TRY TO SELECT THIS TEXT</p>

<div id="quest-modal" class="popupmodal popup-modal-quest">
        <div class="modal-quest">
            <img src="img/wooden-warning.png">
            <div class="btns-quest">
                <a href="#open-modal"><input type="button" value="Accept quest" class="btn-quest"></a>
                <a href="#go-back-page"><input type="button" value="Do not accept quest" class="btn-quest"></a>
            </div>
        </div>
    </div>

这两种方式都使模式在文档加载时出现。但是，我无法与其中的输入进行交互。当我单击按钮时，所有模式及其内容都变得像static。

我最近开始学习 JS 和 jQuery，所以我想知道解决方案是否需要这些代码。

标签： javascripthtmljquerycss

解决方案

当您单击按钮时，添加一些 javascript 代码来做一些事情。还将 id="" 添加到每个按钮。

const acceptBtn = document.getElementById("acceptBtn");
const doNotAcceptBtn = document.getElementById("doNotAcceptBtn");

acceptBtn.addEventListener('click', () => {
    /*
     when accept button is clicked, do some stuff
     */
});

doNotAcceptBtn.addEventListener('click', () => {
    /*
     when doNotAcceptBtn is clicked, do some stuff
     */
});

推荐阅读