javascript弹出图片,背景变暗

 JS文件:
<script language="javascript" type="text/javascript">
function zC(url){
var picurl="../"+url;
 var cWidth,cHeight;
 cWidth = screen.width;
 cHeight = screen.height;
 var cObj = document.createElement("div");
 cObj.setAttribute("id","cdiv");
 cObj.style.position = "absolute";
 cObj.style.top = 0;
 cObj.style.left = 0;
 cObj.style.backgroundColor = "#CCCCCC";
 cObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
 cObj.style.width = cWidth +"px";
 cObj.style.height = cHeight + "px";
 cObj.style.zIndex = "1000";
 document.body.appendChild(cObj);
 var iObj = document.createElement("img");
 iObj.setAttribute("id","cimg");
 iObj.style.position = "absolute";
 iObj.style.top = "50%";
 iObj.style.left = "50%";
 iObj.style.width = "500px";
 iObj.style.height ="400px";
 iObj.style.marginLeft = "-220px" ;
 iObj.style.marginTop = -155+"px";
 iObj.style.textAlign = "center";
 iObj.src = picurl;
 iObj.style.zIndex = "1001";
 iObj.style.cursor = "hand";
 iObj.onclick = function(){
  document.body.removeChild(iObj);
  document.body.removeChild(cObj);
 }
 document.body.appendChild(iObj);
}

</script>

 

服务器控件:

   <img src='<%#Eval("picUrl") %>' οnclick='zC("<%#Eval("picUrl") %>")' style="cursor:hand; width:20PX; height:20px;" />

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个效果可以通过 Vue.js 结合 CSS 实现。你可以在点击事件中添加一个类,使背景颜色变暗,并弹出一个新的页面或模态框。 首先,你可以在 HTML 中添加一个遮罩层,用来遮挡整个页面,并设置其初始状态为隐藏: ```html <div class="mask" :class="{active: showMask}" @click="closeMask"></div> ``` 其中,`:class="{active: showMask}"` 表示根据 `showMask` 变量动态设置 `mask` 的 `active` 类是否生效。`@click="closeMask"` 表示当用户点击遮罩层时,执行关闭遮罩层的方法。 接着,在 `data` 中定义 `showMask` 变量,并在点击事件中将其设置为 `true`,表示显示遮罩层: ```javascript data() { return { showMask: false } }, methods: { openMask() { this.showMask = true; // 弹出页面或模态框的代码 }, closeMask() { this.showMask = false; // 关闭页面或模态框的代码 } } ``` 最后,在 CSS 中定义 `mask` 类和 `active` 类,实现背景变暗的效果: ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mask.active { opacity: 1; visibility: visible; } ``` 这样,当用户点击需要弹出页面或模态框的元素时,就会触发 `openMask` 方法,显示遮罩层并弹出新页面或模态框。而当用户点击遮罩层时,就会触发 `closeMask` 方法,关闭页面或模态框并隐藏遮罩层。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值