时间戳

首页 > 解决方案 > 当值超过数字时在浏览器中心弹出警告

javascript - 当值超过数字时在浏览器中心弹出警告

问题描述

我有一个页面拉 SNMP 数据（使用 php），然后通过 HTML 和颜色编码值显示它。当值超过特定数字时，我想添加一个弹出警报。

我尝试了各种 jquery 选项来实现这一点，但它不起作用。

PHP部分获取值：

<?php
$valueis = snmp2_get("IPADDRESS", "public", ".1.3.6.1.4.1.476.1.42", 1000000, 0);
?>

HTML部分：

<html>
<meta HTTP-EQUIV="REFRESH" content="20">
<head>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#table_fid td.mynumber').each(function(){
        if ($(this).text() <= '16' ) {
            $(this).addClass('blue');
        }
        if ($(this).text() > '16' ) {
            $(this).addClass('green');
        }
   });
});

<DIV style="position: absolute; top:10px; left:10px; width:10px; height:10px"><table id="table_fid">
<td class="mynumber"><a href=http://mywebsite.com><?php echo $valueis?></a></td></tr>
</table></DIV>

这很好用。

但是我希望当值高于 16 时，它还会在浏览器中显示一个弹出窗口作为警报。我试图在此页面中合并指南以自动触发，但没有运气：https ://html-online.com/articles/simple-popup-box/ 。这个页面中的弹出窗口正是我希望我的样子。

标签： javascriptphpjqueryhtmlcss

解决方案

此解决方案适用于支持 rgba() 的现代浏览器。较旧的浏览器需要一些更高级的 CSS。

理想情况下，您应该通过 AJAX 访问 PHP 值，但您可以在 JS 部分对 PHP 值进行硬编码以使事情变得更容易，然后将值插入到 DOM 对象中 ( td.mynumber)。

您的示例仅显示一行数据......但考虑到您使用了 $.each() 迭代器，您可能正在简化多行的解决方案？

对于单行：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
//first assign the PHP value
var the_value = <?php echo $valueis?>; //notice NO quotes! because this is numeric!

//now you can use 'the_value' instead of reading from the DOM object
$(document).ready(function(){
    $('#table_fid td.mynumber').each(function(){
        //assign the_value to the DOM object
        $(this).children().text(the_value);

        //add classes based on the_value
        if (the_value <= 16 ) {//the_value is NUMERIC - no quotes!
            $(this).addClass('blue');
        }

        else {//you don't need another 'if' here, value must be higher than 16
            $(this).addClass('green');
            //show overlay
            $('#overlay').show()// changes display: none to block
        }
   });
});

function closeOverlay () {
    $('#overlay').hide()// changes display: block to none
}
</script>
<style>
*,*:before,*:after{/*best practice, reset box-sizing to include borders and padding in width!*/
    box-sizing: border-box;
}
body{/*best practice, reset body container values*/
    margin: 0;
    padding: 0;
}
#table-container{
    position: absolute; 
    top:10px; 
    left:10px; 
    width:10px;
    height:10px;
    z-index: 1; /*Make this render as the bottom layer*/
}
#overlay{
    display: none; /* default state hidden */
    position: fixed; /* does not move */
    top: 0;/* place at top */
    left: 0;/*place at left */
    height: 100%;/* full height of container */
    width: 100%;/* full width of container */
    background: rgba(0,0,0,0.5);/* semi-transparent black background */
    z-index: 2;/*Make this render ABOVE the bottom layer, because 2 is greater than 1!*/
}

#overlay-x{
    height: 32px;
    width: 32px;
    border-radius: 16px;/*border-radius of HALF height makes this a circle!*/
    display: block;
    font-family: Arial;
    background: white;
    line-height: 26px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border: 3px solid #ccc;
    /* now position this white circle */
    position: absolute;/* absolutely positioned */
    top: 0; /*place at top */
    right: 0;/*place at right*/
    margin-top: -10px;/*pull UP 10px*/
    margin-right: -10px;/*pull RIGHT 10px*/
    cursor: pointer;/*show pointer on hover to make it LOOK clickable*/
}

/* fixed-size  */
#overlay-message-container{
    width: 300px;
    height: 200px;
    background: white;
    text-align: center;
    /* this is how you center position fixed-size */
    position: absolute;/* absolutely positioned */
    top: 50%; /* place in absolute center of container height */
    left: 50%;/* place in absolute center of container width */
    margin-top: -100px; /* pull exactly HALF of the HEIGHT UPward*/
    margin-left: -150px; /* pull exactly HALF of the WIDTH LEFTward*/
    padding: 80px 10px;
    box-shadow: 0 0 30px 10px rgba(0,0,0,0.25);/*drop shadow effect*/
}

</style>
</head>
<body>
<div id="table-container"><!--moved styles to HEAD-->
    <table id="table_fid">
      <tr>
        <td class="mynumber"><a href="http://mywebsite.com"><!--don't need PHP here, value is assigned by JS!--></a></td>
      </tr>
    </table>
</div>
<div id="overlay"><!--the overlay-->
    <div id="overlay-message-container"><!--the message container-->
        <div id="overlay-x" onclick="closeOverlay()">X</div><!--the X to close the window-->
        <div id="overlay-message">This is the message inside the overlay!</div>
    </div>
</div>
</body>
</html>

如果要打印多行，则需要分配一个 JS 值数组：

<script>
//first assign the PHP values - assuming 4 values
var the_values = [
  <?php echo $valueis_1?>, //this is a list of value, use commas
  <?php echo $valueis_2?>,
  <?php echo $valueis_3?>,
  <?php echo $valueis_4?>
] 

//now you can use the_values instead of reading from the DOM object
//Note: $.each() is passed an 'index' value which returns the current loop iteration; you can use this to assign array values
$(document).ready(function(){
    $('#table_fid td.mynumber').each(function(index){//note 'index'!
        //assign the_value to the DOM object
        $(this).text(the_values[index]);

        //add classes based on the_values[index]
        if (the_values[index] <= 16 ) {//the_values[index] is NUMERIC - no quotes!
            $(this).addClass('blue');
        }

        else {//you don't need another 'if' here, value must be higher than 16
            $(this).addClass('green');
            //show overlay - doesn't matter if it's already showing!
            $('#overlay-message').show()
        }
   });
});
</script>

然后在您的 HTML 中，您需要添加 4 行：

<div id="table-container"><!--moved styles to HEAD-->
    <table id="table_fid">
      <tr>
        <td class="mynumber"><a href="http://mywebsite.com"><!--don't need PHP here, value is assigned by JS!--></a></td>
      </tr>
      <tr>
        <td class="mynumber"><a href="http://mywebsite.com"><!--don't need PHP here, value is assigned by JS!--></a></td>
      </tr>
      <tr>
        <td class="mynumber"><a href="http://mywebsite.com"><!--don't need PHP here, value is assigned by JS!--></a></td>
      </tr>
      <tr>
        <td class="mynumber"><a href="http://mywebsite.com"><!--don't need PHP here, value is assigned by JS!--></a></td>
      </tr>
    </table>
</div>

证明在这里： https ://codepen.io/remedio/pen/pozbdLY

这是 FIXED-SIZE 容器的简化答案。您可以使用伪元素和内联块来做一些很酷的事情，以使动态大小的元素居中......

推荐阅读