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

Question

I have a page pulling SNMP data (using php) and then displaying it via HTML and color coding the values. 我有一个页面（使用php）提取SNMP数据，然后通过HTML进行显示，并对值进行颜色编码。 I'd like to add a pop up alert when value exceeds a specific number. 当值超过特定数字时，我想添加一个弹出警报。

I have tried various jquery options to make this happen but its not working. 我已经尝试了各种jquery选项来实现此目的，但是它不起作用。

PHP part to obtain value: PHP部分获得价值：

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

HTML part: 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>

This works great. 这很好。

However I want it that when value is higher than 16, it also shows a pop up window in the browser as an alert. 但是我希望当值大于16时，它还在浏览器中显示一个弹出窗口作为警报。 I've tried to incorporate the guide in this page to auto trigger but with no luck: https://html-online.com/articles/simple-popup-box/ . 我试图将指南合并到此页面中以自动触发，但是没有运气： https : //html-online.com/articles/simple-popup-box/ 。 The pop up window in this page is exactly how I wish mine to be. 此页面上的弹出窗口正是我希望的样子。

Answer 1

This solution is for MODERN browsers, supporting rgba(). 该解决方案适用于支持rgba（）的MODERN浏览器。 Older browsers require some more advanced CSS. 较旧的浏览器需要一些更高级的CSS。

You should ideally be accessing the PHP value through AJAX, but you can hardcode the PHP value(s) in the JS section to make things easier, and then insert the value(s) into the DOM object(s) ( td.mynumber ). 理想情况下，您应该通过AJAX访问PHP值，但是您可以在JS部分中对PHP值进行硬编码，以td.mynumber ，然后将值插入DOM对象（ td.mynumber ）。

Your example only shows one row of data... but considering you used an $.each() iterator, you may be simplifying a solution for multiple rows? 您的示例仅显示一行数据...但是考虑到您使用了$ .each（）迭代器，您可能正在简化多行的解决方案？

For a single row: 对于单行：

<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>

If you have multiple rows being printed, you'd assign an array of JS values: 如果要打印多行，则可以分配一个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>

And then in your HTML, you'd need the 4 rows added: 然后在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>

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

This is a simplified answer for a FIXED-SIZE container. 这是FIXED-SIZE容器的简化答案。 There is some cool stuff you can do with pseudo-elements and inline-blocks to make dynamic sized elements centered.... 您可以使用伪元素和内联块来做一些很酷的事情，以使动态大小的元素居中。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-17 18:20:43

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-17 18:20:43

解决方案1
1 已采纳 2019-08-17 18:20:43