.user-list-classify-mask:遮罩层
.user-list-classify:实际的小弹窗区域
$(".user-list-classify-mask").on('click', function (e) {
if ($(e.target).closest('.user-list-classify').length == 0) {
$(".user-list-classify-mask").hide();
因为遮罩层是覆盖了整个屏幕的,所以一般就遮罩住了触发的那个元素,所以这个就不用除去触发的元素了
还有一种是没有遮罩层,但是会同步出现很多弹窗的list:
.pops:触发弹窗的元素
.ellipsis-pop:一开始隐藏的定位弹窗
有很多td
.report-operation-pop{
position:relative;
.report-operation-pop img{
width:20px;
cursor:pointer;
.ellipsis-pop{
right:0;
top:49px;
width:120px;
background:#fff;
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.15);
box-shadow: 0 0 6px rgba(0,0,0,.15);
-o-box-shadow: 0 0 6px rgba(0,0,0,.15);
-ms-box-shadow: 0 0 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 6px rgba(0,0,0,.15);
border-radius:3px;
padding:10px;
box-sizing:border-box;
z-index:999;
;
html:
<td class="t-a-l report-operation-pop">
<img src="../../../include/images/dian.png" class="pops">
<div class="ellipsis-pop">
<a class="operation-btn">删除</a>
<a class="operation-btn">详情</a>
……很多按钮
//操作栏的点击事件
$("#report_table").on("click",".pops",function(){
$(this).next().toggle();//显示隐藏toggle
$(this).parents('tr').siblings().find('.ellipsis-pop').hide();//只能一个pop显示,其他的pop隐藏
var topH = $(this).parents('td').outerHeight();
$(this).next().css('top',topH/2+8)//pop的top值为td的高度的一半+一个适当的错开值
$(document).on('click', function (e) {//点击除pop之外的区域隐藏pop弹窗 但是要把触发的···去掉,不然点击···pop就不会show了
if ($(e.target).closest('.ellipsis-pop').length == 0 && $(e.target).closest('.pops').length == 0) {
$(".ellipsis-pop").hide();
二、嵌套iframe页面 (我实现的是点击子页面隐藏父页面的元素)
除了写正常页面的操作之外,也需要在子页面里面写第二个操作
$(document).click(function(){//父页面
$(dom).hide();//要隐藏的div
$(document).click(function(){//子页面
$(dom,window.parent.document).hide();
因为子页面里不能直接获取到父页面的元素,所以需要在子页面里面另外写:
$(dom,window.parent.document).hide();
补充:jquery中父子页面之间获取元素

父页面获取子页面元素:
$("#iframe的ID").contents().find("#iframe子页面的ID").click();
父页面调用子页面方法:
$("#iframe的ID")[0].contentWindow.子页面 js 方法();
子页面获取父页面元素:
$("#父页面元素ID" , parent.document);
子页面操作父页面方法:
window.parent.父页面 js 方法();
一、正常页面$(document).click(function(){ $(dom).hide();//要隐藏的div });二、嵌套iframe页面 (我实现的是点击子页面隐藏父页面的元素)除了写正常页面的操作之外,也需要在子页面里面写第二个操作$(document).click(function(){//父页面 $(dom).hide();/...
iframe标签的基本使用
iframe标签在预览pdf文档时,顶部默认会有一行
操作栏,可供用户下载、打印等。因在工作中遇到过一次这样的需求,需要控制用户的下载权限,网上大部分是说
iframe无法控制,都推荐用pdf.js插件,但我总感觉应该可以的,功夫不负有心人,最终还是被我找到了,此方法基本可行,特此记录
一、基本用法
<
iframe ref="
iframe"
height="700"
width="100%"
:src="pdfurl"
最近在做作业中需要在不用iframe的情况下嵌套页面,所以只好在div中嵌套,用的是jquery方法。
复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”).load(“index.jsp”); }); }); [removed]
只要代码就是这么多,其中#button就是一个button的id,content就是你要插入html的div
而且不能直接用$("#button").click(function
var
iframe = $("#diggerName")[0];
if (
iframe.attachEvent){ // for IE
iframe.attachEvent("onload", function(){
$("#diggerName").contents().find(".inquiry_title"
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
class douyuSelenium(unittest.TestCase):
def setUp(self):
self.driver = webdriver.PhantomJS()
<iframe name="processResultMsg" width="100%" height="65%"
id="processResultMsg" src="/${msgPath}" frameborder="no"
scrolling="no" style="overflow: hidden;">您的浏览器不支持i..
打包后,其他的vue、nvue页面都会转成css文件和js文件。
运行时,首先会加载所有的css、js文件,所以首次加载速度会有点慢,之后的页面切换仅是一种append/remove的增删或者show/hide的显隐控制,因此页面切换速度快、页面间切换流畅。
除此之外,页面之间数据传递方便、转场动画可以很炫酷
plus.webview.currentWebview().opener().evalJS("onAppReume()");
其中plus.webview.currentWebview().opener()代表父页面;
evalJS属于WebviewObject方法,用于在Webview窗口中执行JS脚本;
onAppReume()属于父页面函数,可带参数。
详见:h...
在 Vue3 中,如果页面缩小导致文字向上超出 div 区域,可以使用 CSS 的 overflow 属性来解决。overflow 属性用于设置元素内容溢出时的处理方式。可以设置为 "hidden",表示隐藏超出的内容;或设置为 "scroll",表示显示滚动条,可以滚动查看超出的内容。
示例代码:
<div style="overflow: hidden;">
<p>这里是文字</p>
</div>
另外还可以使用css的text-overflow:ellipsis;来解决文字超出显示省略号的问题
示例代码:
<div style="overflow: hidden;text-overflow:ellipsis;">
<p>这里是文字</p>
</div>