html中如何實(shí)現(xiàn)評論回復(fù)彈出遮罩效果

發(fā)布時間：2021-09-30 11:00:11 來源：億速云閱讀：157 作者：小新欄目：移動開發(fā)

這篇文章給大家分享的是有關(guān)html中如何實(shí)現(xiàn)評論回復(fù)彈出遮罩效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

代碼如下：

index.html

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title>append-iframe</title>
<style type="text/css">
html,body{height:100%;padding:0px;margin:0px;}
</style>
</head>
<body>
<div><input type="button" value="show" id="show-id"/></div>
<div><input type="button" value="test" id="test-id"/></div>
<script type="text/javascript">
$("#show-id").on("click",function(){
$(top.document.body).append('<iframe src="subiframe.html" id="np-pop-iframe" allowtransparency="true" frameborder="0" scrolling="no" data-nick="" data-pic="" data-id="" parentid=""></iframe>');
});
$("#test-id").on("click",function(){
alert("test");
});
</script>
</body>
</html>

subiframe.html:

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title>Document</title>
<style type="text/css">
html,body{height:100%;padding:0px;margin:0px;}
.np-popframe-bg-opacity{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.wrapper{
position: absolute;
border:1px solid red;
width:800px;
height: 800px;
background: #fff;
top:1000px;
left:500px;
}
</style>
</head>
<body class="iframe-body" >
<div class="np-popframe-bg-opacity" ></div>
<div class="np-popframe-bg" id="np-popframe-bg-id" ></div>
<div class="wrapper" id="wrapper-id"></div>
</body>
<script type="text/javascript">
(function(){
$("#wrapper-id").animate({top:"100px"},"slow");
$("#np-popframe-bg-id").on("click",function(){
//$(window.parent.document.getElementById("np-pop-iframe")).remove();
$("#np-pop-iframe",window.parent.document).remove();
});
})(jQuery);
</script>
</html>

這里需要用一到濾鏡。讓加載來的遮罩保持透明.

1 np-popframe-bg-id 的作用主要是顯示評論框的外部區(qū)域。當(dāng)鼠標(biāo)點(diǎn)擊該區(qū)域的時候，移除iframe.

2 div 需要設(shè)置100%的高度，需要在前面加上 html,body{height:100%;}的css，否則無效

3 還有一點(diǎn)就是絕對定位的absolute.

感謝各位的閱讀！關(guān)于“html中如何實(shí)現(xiàn)評論回復(fù)彈出遮罩效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

html中如何實(shí)現(xiàn)評論回復(fù)彈出遮罩效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽