Question

我创建的页面允许用户输入信息，然后将其提交给js以验证和修改数据库。页面应弹出一个通知用户成功的弹出窗口。弹出窗口是针对错误或信息性消息的颜色编码。

但是，一旦用户确认消息，它需要一种方法来删除弹出窗口。弹出窗口（div）上有一个按钮，按钮上有一个事件监听器，但该按钮不可点击。

html代码：

<div id="panel">
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/css/msd.css"></link>
    <script src="/static/lib/d3-3.3.8.min.js"></script>
</head><div id="info-msg">
    <p></p>
    <button id="ok">Ok</button>
</div>
<div id="reportAnomaly" >
    <table id="anomaly-table" cols="2">
    <tr>
    <td>
        <input id="submit" type="submit" value="Submit"> 
    </td>
    <td>
        <input id="reset" type="reset" value="Reset Form">
    </td>
    </tr>
    </table>
 </div>
 </div>
</div>

<script src="static/js/dbanomaly.js"></script>
</body>
</html>

JavaScript代码：

var infoMsgDiv = d3.select("#info-msg");

d3.select("#submit").on('click', reportAnomaly);
d3.select("#reset").on('click', resetForm);
d3.select("#ok").on('click', resetForm);

function reportAnomaly() {
    insertResults();
}

function insertResults () {
    displayMessage('warn', "Successfully added.");
}

function resetForm () {
    _log("resetForm");
    infoMsgDiv.style("opacity", 0);
}

function displayMessage (level, message) {
    _log("displayMessage");
    if (level === 'crit') {
        infoMsgDiv.style("background-color", "red");
    } else if (level === 'warn') {
        infoMsgDiv.style("background-color", "yellow");
    } 

    infoMsgDiv.style("opacity", 1);
    infoMsgDiv.select("p").html(message);
}

CSS是：

#info-msg {
    position: absolute;
    top: 0;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    border: 1px solid #ddd;
    border-radius: 10px;
    font: 10pt sans-serif;
    text-align: center;
    line-height: 1.2em;
    opacity: 0;
    transition: opacity 500ms ease-in 250ms;
    pointer-events: none;
    color: black;
}

#info-msg{
    top:  50%;
    left: 50%;
    padding: 10px;
    background-color: #FFFF9F;
}

为什么＆＃34;＃ok＆＃34;按钮不可点击？

按钮无法点击

0 个答案: