我有一個頁面提取 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 關注
- 299 瀏覽
添加回答
舉報
0/150
提交
取消