我有一个页面提取 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/。此页面中的弹出窗口正是我希望的样子。
1 回答
精慕HU
TA贡献1845条经验 获得超8个赞
此解决方案适用于支持 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 容器的简化答案。你可以用伪元素和内联块做一些很酷的事情来使动态大小的元素居中......
- 1 回答
- 0 关注
- 265 浏览
添加回答
举报
0/150
提交
取消