我有一個(gè)頁(yè)面提取 SNMP 數(shù)據(jù)（使用 php），然后通過 HTML 顯示它并對(duì)值進(jìn)行顏色編碼。當(dāng)值超過特定數(shù)字時(shí)，我想添加一個(gè)彈出警報(bào)。我嘗試了各種 jquery 選項(xiàng)來(lái)實(shí)現(xiàn)這一點(diǎn)，但它不起作用。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>這很好用。但是我希望當(dāng)值高于 16 時(shí)，它還在瀏覽器中顯示一個(gè)彈出窗口作為警報(bào)。我試圖將本頁(yè)面中的指南合并到自動(dòng)觸發(fā)中，但沒有運(yùn)氣：https : //html-online.com/articles/simple-popup-box/。此頁(yè)面中的彈出窗口正是我希望的樣子。
1 回答
精慕HU
TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
此解決方案適用于支持 rgba() 的現(xiàn)代瀏覽器。較舊的瀏覽器需要一些更高級(jí)的 CSS。
理想情況下，您應(yīng)該通過 AJAX 訪問 PHP 值，但您可以在 JS 部分對(duì) PHP 值進(jìn)行硬編碼以簡(jiǎn)化操作，然后將值插入到 DOM 對(duì)象中 ( td.mynumber)。
您的示例僅顯示一行數(shù)據(jù)……但考慮到您使用了 $.each() 迭代器，您可能正在簡(jiǎn)化多行的解決方案？
對(duì)于單行：
<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>
如果要打印多行，則需要分配一個(gè) JS 值數(shù)組：
<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 容器的簡(jiǎn)化答案。你可以用偽元素和內(nèi)聯(lián)塊做一些很酷的事情來(lái)使動(dòng)態(tài)大小的元素居中......
- 1 回答
- 0 關(guān)注
- 298 瀏覽
添加回答
舉報(bào)
0/150
提交
取消