我頁面中有一些資料，加上一個按鈕
我按下按鈕後就會出現一個box，這個box可以填資料(填的資料有點多)
想問我想要box秀出來時後面的背景就會變成半透明的，這樣該怎麼做呢?
我目前只能彈出box但後面的背景無法辨半透明
謝謝
<html lang="en">
<head>
<script src="signformchange.js"></script>
<script src="./jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="sign.css">
</head>
<body>
<script src="lib/alertify.min.js"></script>
<script>
function reset () {
$("#toggleCSS").attr("href", "themes/alertify.default.css");
alertify.set({
labels : {
ok : "OK",
cancel : "Cancel"
},
delay : 2000,
buttonReverse : false,
buttonFocus : "ok",
});
}
function t() {
reset();
return false;
}
</script>
<div class="container" >
<?php
require 'db.php';
if(isset($_POST['pen'])){
$arr = $_POST['pen'];
if( count($arr)>0)
{
for($i=0;$i<count($arr);$i++)
{
$sql_sel="select* from myform where id='$arr[$i]'";
$result2 = mysqli_query($db, $sql_sel);
while ($row = mysqli_fetch_array($result2)) {
$book_date=$row["book_date"];
$delivery=$row["delivery"];
//...省略
?>
<div class="alarmform" id="alarmform" style=" border-radius: 30px;">
<form id="myform2" name="myform2" action="check.php" method="post" enctype="multipart/form-data">
<!-- ?status_title=2-->
<div class="form-group row">
<!--line 1-->
<div class="col-12 col-xs-12 col-sm-2 " > </div>
<div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 mt-2 mb-2">
<label>訂貨：</label>
<input class="form-control" name="book_date" id="book_date" value="<?=$book_date;?>" >
</div>
<div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 mt-2 mb-2" >
<label>廠商：</label>
<input class="form-control" name="company" id="company" value="<?=$company;?>">
</div>
<div class="col-12 col-xs-12 col-sm-2 "> </div>
<!--剩下表格省略-->
<!--here-->
<div class="col-sm-4 col-md-4 col-lg-4" ></div>
<div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center mt-5">
<button type="submit" id="submit" name="submit" class="btn " onclick="signclose()" >訂單修改</button>
</div>
<div class="col-sm-2 col-md-2 col-lg-2" ></div>
</form>
</div>
<?php
}
}
}
}
?>
<?php
require 'db.php';
$sql = "SELECT * FROM myform where status in('N') order by delivery ASC";
$result = mysqli_query($db, $sql);//.' LIMIT '.$stacle_page.', '.$per_num
?>
<div class=" ">
<form id="myform" name="myform" action="check.php" method="post" enctype="multipart/form-data">
<table class='table table-bordered text-center max ' id="">
<tr>
<th class='text-center align-middle' > 訂貨<br> 業務</th>
<th class='text-center align-middle' > 修改 </th>
</tr>
<?php
while ($row = mysqli_fetch_array($result)) {
$color="blue";
?>
<tbody id="searchTable">
<tr>
<?php
echo ' <td class="text-center align-middle" style="line-height:30px;color:'. $color.';">
'.$row["book_date"] .$row["sale"].'
<br>
</td>
';
?>
<td class="align-left" style="line-height:30px;">
<button type="submit" class="btn_choice " name="pen[]"id='pen' style="border-width:0px;outline : none;" value="<?=$row["id"]?>">
<img src="images/pen.png" width="30" height="30" >
</button>
</td>
<tr>
<?php
$i++;
}
?>
</font>
</tbody>
</table>
</div>
</form>
<?php
mysqli_close($db);
?>
</div>
</body>
</html>
css:
.alarmform {
position: fixed;
background-color: white;
top: 20%;
left: 38%;
width: 655px;
overflow:auto;
height: 700px;
border: double 2px transparent;
border-radius: 10px;
background-image: linear-gradient(white, white),
linear-gradient( #00E492,#00E492);
background-origin: border-box;
background-clip: content-box, border-box;
text-align: center;
z-index: 999;
}
已邀請的邦友 {{ invite_list.length }}/5
目前你的問題有兩種意思，不太清楚你要的是哪一種。我就先兩種都說好了。但其實都大同小異
1.整頁半透明只剩下BOX清析：
先在BODY下建立一個DIV，這是準備好的遮罩
<div class="mask"></div>
其定義的CSS如下
.mask{
position:fixed;
top : 0;
left : 0;
bottom : 0;
right : 0;
background:rgba(0,0,0,.5);
/*background:hsla(0,100%,80%,0.5)*/
/*background:#000; opacity:0.5; */
}
這上面三個 background 做法都可以使用，選其一用就好。
另外還有的就是利用filter的特性，以下是毛玻璃的特效。
-webkit-filter: blur(5px); /* Chrome, Opera */
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
只是這個用法比較麻煩，得針對不同瀏覽器去個別宣告。
一般比較不常見這種用法。不過使用這樣的方式可以比較容易定義好想要的效果。
iThome鐵人賽
看影片追技術