使用javascript / jquery的自定义警报框

问题描述

我创建了一个自定义警报框。 它以前工作正常，我在网站上没有做任何更改，所以我不确定为什么现在会抛出错误。

<script>
$(document).ready(function() {
    var information_object = <?php echo json_encode($results); ?>;
    $(".content").click(function() {
        var info = information_object[$(this).data('id')];
        if (info) {
            var warning;
            if(info.status == 3){
                warning = "High Voltage Detected";
            }else if(info.status == 4){
                warning = "Caution is Recommended"
            }else{
                warning = "Ok";
            }
            Alert.render("temp: " + info.temp + "&#0153" + "<br>" + "Address: " + info.address + "<br>" + "Date: " + info.date + "<br>" + "Status: " + warning);
        } else {
            alert("Invalid ID: " + id);
        }
    });
});
</script>

 <script
    function CustomAlert(){
        this.render = function(dialog){
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
            var dialogbox = document.getElementById('dialogbox');
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) - (550 * .5)+"px";
            dialogbox.style.top = "100px";
            document.getElementById('dialogboxhead').innerHTML = "temp Warning Information";
            document.getElementById('dialogboxbody').innerHTML = dialog;
            document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
        }

        this.ok = function(){
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
        }
    }

    var Alert = new CustomAlert();
</script>

包含对话框属性的CSS文件的一小部分。

#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}

#dialogbox{
    display: none;
    position: fixed;
    background: #000;
    border-radius:7px; 
    width:550px;
    z-index: 10;
}
#dialogbox > div{ 
    background:#FFF; 
    margin:8px; 
}
#dialogbox > div > #dialogboxhead{ 
    background: #666; 
    font-size:25px; 
    padding:10px; 
    color:#CCC; 
    text-align: Center
}
#dialogbox > div > #dialogboxbody{ 
    background:#333; 
    padding:20px; 
    color:#FFF; 
}
#dialogbox > div > #dialogboxfoot{ 
    background: #666; 
    padding:10px; 
    text-align:right; 
}

读取chrome控制台后，它在dialogoverlay.style.display = block上报告了错误Uncaught“ TypeError：Can not read property'style'of null'”。 为什么会出现此错误？

解决方案是确保您没有在html文件中删除相关代码。 以防万一有人想要使用以上代码，这也是您在html中需要的。

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>