无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-08-01 03:55 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

js利用事件的阻止冒泡实现点击空白模态框的隐藏

小知识点,废话不多说,直接上代码

今天要做一个打印网页的小功能,直接调用window.print(),但是打印出来后,字体总是缩小一号,找不到原因。。。

很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框。假设如下场景,一个小按钮,点击可以弹出一个模态框。

css:

后来尝试用一个IE的打印控件,但仅支持ie有点恶心,只能返回去继续找原因

就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮id:btn,模态框id:model

复制代码 代码如下:

原来,我要打印的页面因为是哥弹出层,所以出现这种现象,后来直接target="_blank",就可以正常打印了。

也许我们最简单的思路就是直接在document上监听一个事件,伪代码如下:

<pre name="code" class="css"><style>
#anchor:{
position:absulate;
top:40%;
left:40%;
width:100px;
height:100px;
background-color:red;
}
</style></pre><br>

另外,

按钮点击弹出事件监听:

js:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

function preview()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr) 17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>

$("#btn").bind("click",function(e){
if(e.stopPropagation){//需要阻止冒泡
e.stopPropagation();
}else{
e.cancelBubble = true;
}
})

<pre name="code" class="javascript">var auchorTop = $("#anchor").css("top");
auchorTop = Number(auchorTop.substring(0, anchorTop.indexOf("p"))); //首先在监听器外部记录某id=anchor的标签的初始位置
window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
$("#anchor").css("top", anchorTop top "px");
};</pre>

将<!--startprint-->和<!--endprint-->放在需要打印的内容开头和结尾,则只打印需要的部分,而不是整个页面。(看的别人的博客哦,嘿嘿)

复制代码 代码如下:

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:js利用事件的阻止冒泡实现点击空白模态框的隐藏

关键词: