浮层java_【转】iframe内部需要弹出浮层问题

function getWindowScrollTop(win){

var scrollTop=0;

if(win.document.documentElement&&win.document.documentElement.scrollTop){

scrollTop=win.document.documentElement.scrollTop;

}else if(win.document.body){

scrollTop=win.document.body.scrollTop;

}

return scrollTop;

}

function setWindowScrollTop(win, topHeight)

{

if(win.document.documentElement)

{

win.document.documentElement.scrollTop = topHeight;

}

if(win.document.body){

win.document.body.scrollTop = topHeight;

}

}

function getWindowScrollLeft(win){

var scrollLeft=0;

if(win.document.documentElement&&win.document.documentElement.scrollLeft){

scrollLeft=win.document.documentElement.scrollLeft;

} else if(win.document.body){

scrollLeft=win.document.body.scrollLeft;

}

return scrollLeft;

}

function getWindowHeight(win){

var clientHeight=0;

if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){

clientHeight = (win.document.body.clientHeight

win.document.body.clientHeight:win.document.documentElement.clientHeight;

}else{

clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?

win.document.body.clientHeight:win.document.documentElement.clientHeight;

}

return clientHeight;

}

function getWindowWidth(win){

var clientWidth=0;

if(win.document.body.clientWidth&&win.document.documentElement.clientWidth){

clientWidth = (win.document.body.clientWidth

win.document.body.clientWidth:win.document.documentElement.clientWidth;

}else{

clientWidth = (win.document.body.clientWidth>win.document.documentElement.clientWidth)?

win.document.body.clientWidth:win.document.documentElement.clientWidth;

}

return clientWidth;

}

function unpop()

{

try{

var win = (top && top!=self)?top:window;

}

catch(e)

{

return ;

}

win.document.getElementById('mask').style.display = "none";

win.document.getElementById("id_popdiv").style.display = "none";

win.document.getElementById("id_iframe_pop").setAttribute('src', '');

}

function pop(url,width,height)

{

try{

var win = (top && top!=self)?top:window;

}

catch(e)

{

return ;

}

var topWindowHeight = getWindowHeight(win);

var topWindowWidth = getWindowWidth(win);

var lvTop=parseInt((topWindowHeight-height)/2)+parseInt(getWindowScrollTop(win));

var lvLeft=parseInt((topWindowWidth-width)/2)+parseInt(getWindowScrollLeft(win));

lvTop = lvTop<=0?1:lvTop;

lvLeft = lvLeft<=0?1:lvLeft;

win.document.getElementById("id_popdiv").style.top=lvTop+"px";

win.document.getElementById("id_popdiv").style.left=lvLeft+"px";

win.document.getElementById("id_popdiv").style.margin="0";

win.document.getElementById("id_iframe_pop").setAttribute('src', url);

win.document.getElementById("id_iframe_pop").setAttribute('width', width);

win.document.getElementById("id_iframe_pop").setAttribute('height', height);

win.document.getElementById('mask').style.display = "block";

win.document.getElementById("id_popdiv").style.display = "block";

}

`container_overlay` 是 Vue 中的一个组件,通常用于实现浮层效果。具体来说,它是一个包含遮罩层和内容层的容器组件,通过设置不同的样式和事件处理函数,可以实现不同的浮层效果。 在 `container_overlay` 中,遮罩层和内容层通常是两个子组件,遮罩层用于阻止用户对页面其他部分的操作,内容层则是浮层的具体内容。你可以在 `container_overlay` 上设置一些属性和事件处理函数来控制浮层的显示和隐藏,例如: - `visible`:控制浮层的显示和隐藏; - `click-overlay`:点击遮罩层时触发的事件处理函数; - `click-content`:点击内容层时触发的事件处理函数。 示例代码如下: ```html <template> <div class="container_overlay" v-if="visible" @click="handleClickOverlay"> <div class="overlay"></div> <div class="content" @click.stop="handleClickContent"> <!-- 浮层内容 --> </div> </div> </template> <script> export default { props: { visible: Boolean, }, methods: { handleClickOverlay() { // 点击遮罩层时的处理函数 }, handleClickContent() { // 点击内容层时的处理函数 }, }, }; </script> <style> .container_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 其他样式 */ } </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值