弹出自定义页面

js实现右键弹出⾃定义菜单近期在项⽬中有⼀个右键菜单的需求，发现很多实现都⽐较复杂，于是⾃⼰花了⼀点时间稍微研究了⼀下，下⾯提供⼀个简洁的实现⽅法。

js声明部分：//创建右键菜单var epMenu={create:function(point,option){var menuNode=document.getElementById('epMenu');if(!menuNode){//没有菜单节点的时候创建⼀个menuNode=document.createElement("div");menuNode.setAttribute('class','epMenu');menuNode.setAttribute('id','epMenu');}else $(menuNode).html('');//清空⾥⾯的内容$(menuNode).css({left:point.left+'px',top:point.top+'px'});for(var x in option){var tempNode=document.createElement("a");$(tempNode).text(option[x]['name']).on('click',option[x].action);menuNode.appendChild(tempNode);}$("body").append(menuNode);},destory:function(){$(".epMenu").remove();}};function sayhello(){alert("hellokity");epMenu.destory();}function hideSysMenu() {return false;}css样式定义部分：.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family:微软雅⿊; font-size:14px; cursor:default;} .epMenu a:hover{ background:#fff;}下⾯就是菜单的⾃定义调⽤部分了：document.onmousedown = function(e){var menuNode=document.getElementById('epMenu');if(e.button===2){document.oncontextmenu = hideSysMenu;//屏蔽⿏标右键var evt = window.event || arguments[0];var rightedge = evt.clientX;var bottomedge = evt.clientY;epMenu.create({left:rightedge,top:bottomedge},[{name:'a1','action':sayhello},{name:'b2','action':sayhello},{name:'c3','action':sayhello},{name:'c4','action':sayhello}]);}// epMenu.destory();}简单解析⼀下：1、epMenu.create⽅法的第⼀个参数是菜单弹出的位置坐标（距离屏幕左上⾓），这⾥⽤的是⿏标点击的坐标，菜单跟随⿏标点击弹出；第⼆个参数是⼀个json格式的数据，⽤于⾃定义菜单项，name是菜单项名字，action是点击菜单项后的动作（可以是函数，ajax请求等）。

html⾥⾯⾃定义弹出窗⼝ ⽹页上默认的提⽰框或对话框⼀般⽐较丑，可以利⽤div遮盖层来⾃定义对话框 1.定义⼀个按钮或者链接（项⽬⾥⾯是通过点击⼀个图⽚） <img src="images/zz.gif" style="margin-top:16%" onclick="myalert('描述（限200字）：')"/> 2.设置隐藏的遮罩层　 <div id="divResult"></div><div id="bg"></div> <div class="box" style="display: none"> <div class="title">标题</div> <div class="list2"> <p></p> </div> <div> <textarea id="remark" style="width:80%;margin-left:5%"></textarea> </div> <div class="end"> <center> <a id="btnZhuanhui" href="#" class="close" style="color:#000000; font-size:16px; margin-right:5%">确定</a> <a id="btnCloseHref" href="#" class="close" style="color:#000000; font-size:16px; margin-left:5%">取消</a> </center> </div> </div> 3.⽤css设定⾃⼰的通⽤样式 .box { position: absolute; width: 250px; left: 50%; height: auto; z-index: 100; background-color: #fff; border: 1px solid rgb(0,153,153); /*padding: 1px;*/ } .box div.title { height: 35px; font-size: 16px; background-color: #099; position: relative; padding-left: 10px; line-height: 35px; color: #fff; } .box div.title a { position: absolute; right: 5px; font-size: 16px; color: #fff; } .box div.list { min-height:60px; padding: 10px; } .box div.list p { height: 24px; line-height: 60px; font-size:14px; } .box div.end { min-height:30px; padding: 5px; } #bg { background-color: #666; position: absolute; z-index: 99; left: 0; top: 0; display: none; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } 4.编写myalert function myalert(msg) { $("#bg").css({ display: "block", //height:$(document).height() height: "100%", position: "fixed" }); var $box = $('.box'); $box.css({ //设置弹出层距离左边的位置 left: ($("body").width() - $box.width()) / 2 + "px", //设置弹出层距离上⾯的位置 top: ($(window).height() - $box.height()) / 2 - $(window).scrollTop() - $box.height() + "px", display: "block" }).find("p").html(msg); }。

html⾃定义弹框⼀、要实现的功能1、弹框弹出时有遮罩2、弹框内的⽂字过多时右侧有滚动条3、根据执⾏结果变更弹框title的样式⼆、具体实现思路：定义⼀个有宽⾼的div，默认隐藏，当要显⽰时，设置为display=block来显⽰1、定义div布局，⼀个遮罩层；⼀个弹框（弹框中有标题和内容两部分）<div id="dialogmask" class="dialogmask opacity"></div><div id="dialog" class="box" style="display: none">　<div id="dialog_title" class="dialogtitle"><label style="padding-left: 10px">执⾏结果</label><label style="float: right;padding-right: 10px;" onclick="closelog()">[关闭]</label></div><div id="dialog_content" class="dialogcontent"><div id="logcontent" class="logcontent”>要展⽰的弹框内容</div></div> </div>2、弹框样式2.1 弹框是否显⽰默认不显⽰：display=none当显⽰时，通过jquery更改显⽰样式display=block.box {position: absolute;display: none;width: 60%;height: 70%;z-index: 100; /*值越⼤，和其他层层叠时越在上⾯*/left: 20%;top: 15%;background-color: #fff;border: 1px solid rgb(0, 153, 153);}2.2 弹框中内容部分⽂字超长时显⽰滚轴设置出现滚轴：overflow:scroll必须设置height.dialogcontent {padding-top: 20px;OVERFLOW: scroll;height: calc(100% - 20px);height: -webkit-calc(100% - 20px);}注意：height计算因为⽗div设置了height，所以这⾥设置100%即会撑满整个但是因为弹框中还有标题占⽤了20px，所以我们需要做⼀个padding-top:20px使其不要和标题部分重合height计算也需要减去标题的20px，通过calc()计算2.3 设置显⽰的层级z-index:100;//设置层级，数值越⼤的在最上层显⽰所以弹框的z-index最⼤，然后是遮罩层的3、遮罩层样式.dialogmask {position: fixed;top: 0px;height: 100%;width: 100%;z-index: 80;display: none;}.opacity { /*遮罩浑浊处理*/opacity: 0.3;filter: alpha(opacity=30);background-color: #000;}同样的初始时设置display:none;显⽰的时候更改display=block来显⽰z-index的值要⽐弹框的⼩position:fixed;展⽰在整个页⾯内4、Jquery变更display等css样式显⽰弹框：function showlog_result(result, info) {//展⽰具体⽇志内容，以及根据结果是否正确变更title的颜⾊$("#dialog").css({display: "block"});$("#dialogmask").css({display: "block"});$("#logcontent").html(info);if (result) {$("#dialog_title").css({background: "#00CC00"});} else {$("#dialog_title").css({background: "#FF3333"});}}说明：通过Jquery的css()⽅法更改样式后，根据result结果是true还是false变更标题部分的背景颜⾊关闭弹框：function close() {//关闭⽇志弹框$("#dialog").css({display: "none"});$("#dialogmask").css({display: "none"});}三、实例代码<!DOCTYPE html><html lang="en"><script src="https:///jquery/1.12.4/jquery.min.js"></script><head><meta charset="UTF-8"><title>测试弹框</title><style>.dialogmask {position: fixed;top: 0px;height: 100%;width: 100%;z-index: 80;display: none;}.opacity { /*遮罩浑浊处理*/opacity: 0.3;filter: alpha(opacity=30);background-color: #000;}.box {overflow: hidden;position: absolute;width: 60%;height: 70%;z-index: 100; /*值越⼤，和其他层层叠时越在上⾯*/left: 20%;top: 15%;background-color: #fff;border: 1px solid rgb(0, 153, 153);}.dialogtitle {width: 100%;height: 30px;line-height: 30px;position: absolute;font-size: 18px;top: 0px;background-color: lightgrey;}.dialogcontent {padding-top: 20px;OVERFLOW: scroll;height: calc(100% - 20px);height: -webkit-calc(100% - 20px);}.logcontent {padding: 10px;}</style><script>//显⽰弹框，并且根据结果是true或false来更改标题部分的颜⾊function showlog_result(result, info) {//展⽰具体弹框内容，以及根据结果是否正确变更title的颜⾊ $("#dialog").css({display: "block"});//通过Jquery的css()更改样式$("#dialogmask").css({display: "block"});$("#logcontent").html(info);if (result) {$("#dialog_title").css({background: "#00CC00"});} else {$("#dialog_title").css({background: "#FF3333"});}}function closepop() {//关闭弹框$("#dialog").css({display: "none"});$("#dialogmask").css({display: "none"});}</script></head><body><div><button onclick="showlog_result(true,'展⽰正确内容的弹框')">展⽰正确弹框</button><button onclick="showlog_result(false,'展⽰错误内容的弹框')">展⽰错误弹框</button></div><div id="dialogmask" class="dialogmask opacity"></div><div id="dialog" class="box" style="display: none">　<div id="dialog_title" class="dialogtitle"><label style="padding-left: 10px">执⾏结果</label><label style="float: right;padding-right: 10px;" onclick="closepop()">[关闭]</label></div><div id="dialog_content" class="dialogcontent"><div id="logcontent" class="logcontent">要显⽰的内容区域~</div></div></div></body></html>。

安装IE8后，每次点击该浏览器总是弹出“欢迎使用internet explorer8”窗口，该如何解决？用户在安装完IE8后，打开IE8浏览器时，弹出设置向导，顺利完成IE8设置向导后，再次打开IE8，又会弹出“欢迎使用IE8”的设置向导界面，为什么每次打开IE 浏览器都会弹出IE8设置向导页面？该怎么取消每次打开IE出现的IE8设置向导界面呢。

ie8总是弹出ie8老是弹出设置ie8总是跳出设置总是出现ie8设置ie8打开弹出设置方法11、在开始运行搜索框中键入“gpedit.msc”，回车，打开本地组策略编辑器。

2、依次点击“计算机配置”→“用户配置”→“管理模板”→“Windows 组件”→“Interner Explorer”。

3、在Interner Explorer下找到“阻止执行首次运行自定义设置”项，双击打开。

4、在“阻止执行首次运行自定义设置”设置对话框中，默认选择为“未配置”，请点击“已启用”将其更改，按“确定”退出设置，并关闭编辑器。

重新打开IE8，就不会不再出现IE8的设置向导界面了。

Internet Explorer,找到“阻止执行首次运行自定义设置”，双击选择已启用，下面选择“直接转到主页”，确定即可。

经过这样的设置后，再次打开IE8，就不会出现IE8设置向导页面了。

★★★()独家文章，欢迎转载ie8弹出设置窗口ie8总是要设置ie8弹出设置ie8总是提示设置ie8每次弹出设置方法2.重置就能解决的不会再有这一对话框了，打开IE--工具--Internet选项--高级--重置--这时有一个小窗口弹出，有一个选项是（取消个人设置）打上勾--重置.这样就回到原始状态,默认状态下使用就可以了。

vueelement的dialog弹出窗⼝加上最⼤化还原和⾃定义拖拽、拉伸弹窗（分两个⽂件）拖拽和拉伸：（直接在main.js引⼊）import Vue from 'vue'// v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', {bind (el, binding, vnode, oldVnode) {if (!binding.value) returnconst dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')dialogHeaderEl.style.cssText += ';cursor:move;'dragDom.style.cssText += ';top:0px;'// 获取原有属性 ie dom元素.currentStyle ⽕狐⾕歌 window.getComputedStyle(dom元素, null);const sty = (function () {if (document.body.currentStyle) {// 在ie下兼容写法return (dom, attr) => dom.currentStyle[attr]} else {return (dom, attr) => getComputedStyle(dom, false)[attr]}})()if (dialogHeaderEl) {dialogHeaderEl.onmousedown = (e) => {// ⿏标按下，计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTop// const screenWidth = document.body.clientWidth + 100000 // body当前宽度// const screenHeight = document.documentElement.clientHeight + 5550000 // 可见区域⾼度(应为body⾼度，可某些环境下⽆法获取)// const dragDomWidth = dragDom.offsetWidth // 对话框宽度// const dragDomheight = dragDom.offsetHeight // 对话框⾼度// const minDragDomLeft = dragDom.offsetLeft// const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth// const minDragDomTop = dragDom.offsetTop// const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight// 获取到的值带px 正则匹配替换let styL = sty(dragDom, 'left')if (styL === 'auto') styL = '0px'let styT = sty(dragDom, 'top')// 注意在ie中第⼀次获取到的值为组件⾃带50% 移动之后赋值为pxif (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)} else {styL = +styL.replace(/px/g, '')styT = +styT.replace(/px/g, '')}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离let left = e.clientX - disXlet top = e.clientY - disY// 边界处理// if (-(left) > minDragDomLeft) {// left = -(minDragDomLeft)// } else if (left > maxDragDomLeft) {// left = maxDragDomLeft// }// if (-(top) > minDragDomTop) {// top = -(minDragDomTop)// } else if (top > maxDragDomTop) {// top = maxDragDomTop// }// 移动当前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}return false}} else {return false}}})Vue.directive('dialogChange', {bind (el, binding, vnode, oldVnode) {if (!binding.value) returnconst dragDom = el.querySelector('.el-dialog')let dragMouse// 在弹出框的右下⾓添加可拉伸标志 class='mouse'let none1 = dragDom.childNodes[2]let none2 = none1.childNodes[0]for (let i = 0; i < none2.childNodes.length; i++) {if (none2.childNodes[i].className === 'mouse') {dragMouse = none2.childNodes[i]}}// ⿏标拖拽if (dragMouse) {dragMouse.onmousedown = (e) => {// content区域// const content = dragDom.parentNode.parentNode.parentNode.parentNode// const content = window.screenconst disX = e.clientX - dragDom.offsetWidthconst disY = e.clientY - dragDom.offsetHeightdocument.onmousemove = function (e) {e.preventDefault() // 移动时禁⽤默认事件// 通过事件委托，计算移动的距离let width = e.clientX - disXlet height = e.clientY - disY// var h = document.documentElement.clientHeight || document.body.clientHeight // var w = document.documentElement.clientWidth || document.body.clientWidth // let curHeight = h * 0.6// let curWidth = w * 0.5// if (width < '800' || height < e.clientY) {// return false// } else {if (height > 400) {dragDom.style.height = `${height}px`}if (width > 600) {dragDom.style.width = `${width}px`}// if (width > content.offsetWidth && height < content.offsetHeight) {// dragDom.style.height = `${height}px`// } else if (width < content.offsetWidth && height > content.offsetHeight) {// dragDom.style.width = `${width}px`// } else if (width < content.offsetWidth && height < content.offsetHeight) {// dragDom.style.width = `${width}px`// dragDom.style.height = `${height}px`// }}// }document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}return false}} else {return false}}})最⼤化和还原，（在main.js引⼊⽂件注册指令）export default {bind (el, binding, vnode, oldVnode) {// 弹框可拉伸最⼩宽⾼// let minWidth = 400// let minHeight = 300// 初始⾮全屏let isFullScreen = false// 当前宽⾼let nowWidth = 0let nowHight = 0// 当前顶部⾼度let nowMarginTop = 0// 获取弹框头部（这部分可双击全屏）const dialogHeaderEl = el.querySelector('.el-dialog__header')let hasSetBodyHight = false// 弹窗const dragDom = el.querySelector('.el-dialog')// 给弹窗加上overflow auto；不然缩⼩时框内的标签可能超出dialog；// dragDom.style.overflow = "auto"// 清除选择头部⽂字效果dialogHeaderEl.onselectstart = new Function('return false')// 头部加上可拖动cursor// 获取原有属性 ie dom元素.currentStyle ⽕狐⾕歌 window.getComputedStyle(dom元素, null)const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)// 头部插⼊最⼤化最⼩化元素let maxMin = document.createElement('button')maxMin.className += ' el-dialog__headerbtn el-dialog__minmax'maxMin.style.right = '40px'maxMin.style.color = '#909399'maxMin.title = '最⼤化'maxMin.innerHTML = '<i class="el-icon-full-screen" onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"></i>' dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1])let moveDown = (e) => {// ⿏标按下，计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTop// 获取到的值带px 正则匹配替换let styL, styT// 注意在ie中第⼀次获取到的值为组件⾃带50% 移动之后赋值为pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)} else {styL = +sty.left.replace(/\px/g, '')styT = +sty.top.replace(/\px/g, '')}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离const l = e.clientX - disXconst t = e.clientY - disY// 移动当前元素dragDom.style.left = `${l + styL}px`dragDom.style.top = `${t + styT}px`// 将此时的位置传出去// binding.value({x:e.pageX,y:e.pageY})}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}}dialogHeaderEl.onmousedown = moveDownlet bodyHeight = 'auto'function setMaxMin () {if (isFullScreen == false) {let i = maxMin.querySelector('.el-icon-full-screen')i.classList.remove('el-icon-full-screen')i.classList.add('el-icon-crop')maxMin.title = '还原'bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px'nowHight = dragDom.clientHeightnowWidth = dragDom.clientWidthnowMarginTop = dragDom.style.marginTopdragDom.style.left = 0dragDom.style.top = 0dragDom.style.height = '100VH'dragDom.style.width = '100VW'dragDom.style.marginTop = 0isFullScreen = truedialogHeaderEl.style.cursor = 'initial'dialogHeaderEl.onmousedown = nullif (!hasSetBodyHight) {dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + dialogHeaderEl.offsetHeight + 'px)'hasSetBodyHight = true}} else {let i = maxMin.querySelector('.el-icon-crop')i.classList.remove('el-icon-crop')i.classList.add('el-icon-full-screen')maxMin.innerHTML = '<i class="el-icon-full-screen"></i>'maxMin.title = '最⼤化'dragDom.style.height = 'auto'dragDom.style.width = nowWidth + 'px'dragDom.style.marginTop = nowMarginTopisFullScreen = falsedialogHeaderEl.style.cursor = 'move'dialogHeaderEl.onmousedown = moveDowndragDom.querySelector('.el-dialog__body').style.height = bodyHeighthasSetBodyHight = false}}// 点击放⼤缩⼩效果maxMin.onclick = setMaxMin// 双击头部效果} }。

QTquick-Popup弹出窗⼝⾃定义的实现⽬录1.Popup介绍2.⾃定义Popup1.Popup介绍Popup是⼀个弹出窗⼝的控件它的常⽤属性如下所⽰:anchors.centerIn : Object,⽤来设置居中在谁窗⼝中.closePolicy : enumeration,设置弹出窗⼝的关闭策略,默认值为默认值为Popup.CloseOnEscape|Popup.CloseOnPressOutside,取值有: Popup.NoAutoClose : 只有在⼿动调⽤close()后，弹出窗⼝才会关闭(⽐如加载进度时,不XIANG)。

Popup.CloseOnPressOutside : 当⿏标按在弹出窗⼝外时，弹出窗⼝将关闭。

Popup.CloseOnPressOutsideParent : 当⿏标按在其⽗项之外时，弹出窗⼝将关闭。

Popup.CloseOnReleaseOutside : 当⿏标在弹出窗⼝外部松开按下时，弹出窗⼝将关闭。

Popup.CloseOnReleaseOutsideParent : 当⿏标在其⽗项松开按下时，弹出窗⼝将关闭。

Popup.CloseOnEscape : 当弹出窗⼝具有活动焦点时，按下ESC键时，弹出窗⼝将关闭。

dim : bool,昏暗属性,默认为undefined,设置为false,则模态窗⼝弹出后的其它背景不会昏暗modal : bool,模态,默认为false(⾮模态,⾮阻塞调⽤,指出现该对话框时,也可以与⽗窗⼝进⾏交互,此时dim是⽆效果的)enter : Transition,进⼊弹出窗⼝时的动画过渡exit : Transition,退出弹出窗⼝时的动画过渡它的信号如下所⽰:void aboutToHide(): 当弹出窗⼝即将隐藏时，会发出此信号。

void aboutToShow(): 当弹出窗⼝即将显⽰时，会发出此信号。

void closed(): 当弹出窗⼝关闭时发出此信号。

Word中如何进行页面布局调整页面布局是指在使用Microsoft Word处理文档时，对页面的大小、方向、边距和列数进行调整的过程。

页面布局的调整可以根据具体需要更改页面的外观，以便更好地呈现内容和改善阅读体验。

下面将介绍一些在Word中进行页面布局调整的方法。

1. 页面大小调整：在Word中，可以通过以下步骤调整页面的大小：- 在菜单栏中选择“布局”选项卡；- 点击“大小”按钮，弹出下拉列表，选择或自定义页面的大小；- 确定后，页面的大小将会被调整为所选尺寸。

2. 页面方向调整：如果需要将页面的方向改为纵向或横向，可以按照以下步骤进行调整：- 在菜单栏中选择“布局”选项卡；- 点击“方向”按钮，弹出下拉列表，选择纵向或横向；- 页面方向将会根据所选项进行调整。

3. 边距调整：调整页面边距可以改变文本与页面边缘之间的距离，可以按照以下步骤进行调整：- 在菜单栏中选择“布局”选项卡；- 点击“边距”按钮，弹出下拉列表，选择默认边距或自定义边距；- 如选择自定义边距，可以在“页面设置”对话框中，自行输入所需的边距数值。

4. 列数调整：若要在页面中添加多列布局，可以按照以下步骤进行调整：- 在菜单栏中选择“布局”选项卡；- 点击“栏目”按钮，弹出下拉列表，选择所需的列数；- 页面将会被分割成对应的列数，可在其中输入或编辑内容。

5. 页面分节：如果需要在同一文档中设置不同的页面布局，可以使用页面分节功能，按照以下步骤进行设置：- 将光标移至需要分节的位置；- 在菜单栏中选择“布局”选项卡；- 在“分节”分组中，点击“分节符”按钮，选择所需的分节方式；- 页面将会根据设置进行分割，每个分节可以有独立的布局设置。

通过上述操作，可以在Word中进行页面布局调整，使文档的外观满足要求。

只需轻松几步，就能够灵活地控制文档的页面大小、方向、边距和列数，以及使用页面分节功能实现不同部分的不同布局。

在处理各种文档时，了解和熟练使用这些页面布局调整功能，可以提高工作效率，使文档更加整洁美观。

JavaScript写的⼀个⾃定义弹出式对话框代码下图是我的设计思路下⾯是具体的js代码1，⾸先定义⼏个⾃定义函数代码复制代码代码如下://判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function';}//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}2，具体的窗体实现代码代码复制代码代码如下://弹出窗⼝，标题（html形式）、html、宽度、⾼度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前⾯为按钮值，后⾯为按钮onclick事件）function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度（也即整个屏幕的宽度和⾼度）var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true，即模式对话框的话，就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; //标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText，所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分，CSS中的overflow使得当内容⼤⼩超过此范围时，会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话，就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性，所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "&nbsp&nbsp";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = '关闭';// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/*************************************以下为拖动窗体事件*********************///⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left);//移动⿏标事件tBar.onmousemove = function(){if(moveable){var eve = getEvent();var x = toLeft + eve.clientX - mouseX;var y = toTop + eve.clientY - mouseY;if (x > 0 && (x + width < w) && y > 0 && (y + height < h)){win.style.left = x + "px";win.style.top = y + "px";}}}//放下⿏标事件，注意这⾥是document⽽不是tBardocument.onmouseup = function(){moveable = false;}}//获取浏览器事件的⽅法，兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);remChild(mask);}}实例调⽤复制代码代码如下:str = "看看我的窗体效果";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);更为完整实⽤的代码，包括定义和调⽤代码复制代码代码如下:<html><head><title>⾃定义弹出对话框</title><style type ="text/css" >.layout{width:2000px;height:400px;border:solid 1px red;text-align:center;}</style><script type="text/javascript">//判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function'; }//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}//弹出窗⼝，标题（html形式）、html、宽度、⾼度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前⾯为按钮值，后⾯为按钮onclick事件）function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度（也即整个屏幕的宽度和⾼度）var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true，即模式对话框的话，就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";//标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText，所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分，CSS中的overflow使得当内容⼤⼩超过此范围时，会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话，就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性，所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "&nbsp&nbsp";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = "关闭";// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/******************************************************以下为拖动窗体事件************************************************/ //⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left); //移动⿏标事件 tBar.onmousemove = function() { if(moveable) { var eve = getEvent(); var x = toLeft + eve.clientX - mouseX; var y = toTop + eve.clientY - mouseY; if (x > 0 && (x + width < w) && y > 0 && (y + height < h)) { win.style.left = x + "px"; win.style.top = y + "px"; } } } //放下⿏标事件，注意这⾥是document⽽不是tBar document.onmouseup = function() { moveable = false; } }//获取浏览器事件的⽅法，兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);if (mask){remChild(mask);}}}function addCheckbox(name,value,id,click){var str = "<input type='checkbox' name='" + name + "' value='" + value + "' id='" + id + "' onclick='" + (click == null ? '':click) + "'/>&nbsp<label for='" + id + "'>" + value + "</label>";return str;}function show(){var str = "<div><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='7' style='text-align:center'>请选择所在地区：" + addCheckbox('all','全（不）选','cities_all','selectAll(this,\"cities_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('cities_cb','长沙市','cities_cb1') + "</td><td>" + addCheckbox('cities_cb','株洲市','cities_cb2') + "</td><td>" + addCheckbox('cities_cb','湘潭市','cities_cb3') + "</td><td>" + addCheckbox('cities_cb','衡阳市','cities_cb4') + " </td><td>" + addCheckbox('cities_cb','益阳市','cities_cb5') + "</td>";str += "<td>" + addCheckbox('cities_cb','常德市','cities_cb6') + "</td><td>" + addCheckbox('cities_cb','岳阳市','cities_cb7') + "str += "<tr><td>" + addCheckbox('cities_cb','邵阳市','cities_cb8') + "</td><td>" + addCheckbox('cities_cb','郴州市','cities_cb9') + "</td><td>" + addCheckbox('cities_cb','娄底市','cities_cb10') + "</td>";str += "<td>" + addCheckbox('cities_cb','永州市','cities_cb11') + "</td><td>" + addCheckbox('cities_cb','怀化市','cities_cb12') + "</td><td>" + addCheckbox('cities_cb','张家界市','cities_cb13') + "</td><td>" + addCheckbox('cities_cb','湘西⾃治州','cities_cb14') + "</td></tr>";str += "</table></div><br/><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='10' style='text-align:center'>请选择矿种：" + addCheckbox('all','全（不）选','class_all','selectAll(this,\"class_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铋','class_cb1') + "</td><td>" + addCheckbox('class_cb','钒','class_cb2') + "</td> <td>" + addCheckbox('class_cb','⾦','class_cb3') + "</td><td>" + addCheckbox('class_cb','煤','class_cb4') + "</td><td>" + addCheckbox('class_cb','锰','class_cb5') + "</td><td>" + addCheckbox('class_cb','钼','class_cb6') + "</td><td>" + addCheckbox('class_cb','铅','class_cb7') + "</td><td>" + addCheckbox('class_cb','⽯膏','class_cb8') + "</td><td>" + addCheckbox('class_cb','⽯煤','class_cb9') + "</td><td>" + addCheckbox('class_cb','锑','class_cb10') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铁','class_cb11') + "</td><td>" + addCheckbox('class_cb','铜','class_cb12') + "</td><td>" + addCheckbox('class_cb','钨','class_cb13') + "</td><td>" + addCheckbox('class_cb','锡','class_cb14') + "</td><td>" + addCheckbox('class_cb','锌','class_cb15') + "</td><td>" + addCheckbox('class_cb','银','class_cb16') + "</td><td>" + addCheckbox('class_cb','萤⽯','class_cb17') + "</td><td>" + addCheckbox('class_cb','铀','class_cb18') + "</td><td>" + addCheckbox('class_cb','稀⼟氧化物','class_cb19') + "</td><td>" + addCheckbox('class_cb','重晶⽯','class_cb20') + "</td> </tr>";str += "<tr><td>" + addCheckbox('class_cb','硼','class_cb21') + "</td><td>" + addCheckbox('class_cb','磷','class_cb22') + "</td><td>" + addCheckbox('class_cb','⽔泥灰岩','class_cb23') + "</td><td>" + addCheckbox('class_cb','熔剂灰岩','class_cb24') + "</td><td>" + addCheckbox('class_cb','冶⾦⽩云岩','class_cb25') + "</td><td>" +addCheckbox('class_cb','岩盐','class_cb26') + "</td><td>" + addCheckbox('class_cb','芒硝','class_cb27') + "</td><td>" + addCheckbox('class_cb','钙芒硝','class_cb28') + "</td><td>" + addCheckbox('class_cb','地下⽔','class_cb29') + "</td><td>" + addCheckbox('class_cb','地下热⽔','class_cb30') + "</td></tr>";str += "</table></div></div>";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);}function selectAll(obj,oName){var checkboxs = document.getElementsByName(oName);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}}function getStr(cbName){var cbox = document.getElementsByName(cbName);var str = "";for (var i=0;i<cbox.length;i++){if(cbox[i].checked){str += "," + cbox[i].value;}}str = str.substr(1);return str;}function fun1(){var str = getStr('cities_cb');alert('你选择的地区为：' + str);}function fun2(){var str = getStr('class_cb');alert('你选择的矿种为：' + str);}</script><body><div class ="layout"></div><div class ="layout"></div><div class ="layout"><input type="button" value="显⽰" onclick="show()" /> </div></body></html>此脚本在ie，firefox浏览器下运⾏通过。

vue⾃定义组件+Dialog对话框组件定制弹出框教程（原创）1、新建⼀个.vue页⾯，写⼀个Dialog组件、把弹出框上想要展⽰的内容放进去。

<template><el-dialogtitle="新增标签":visible.sync="centerDialogVisible"width="80%"center><div><div style="background-color: #8c939d; color: #FFFFFF;height:50px;margin:0px;position: relative;top: -12px;left: -1%;width:1168px; font-size: 18px;"></div><h4>基本信息</h4><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="标签类⽬" prop="region" class="region"><el-select v-model="ruleForm.region" placeholder="所属标签类⽬"><el-option label="标签类⽬" value="shanghai"></el-option><el-option label="标签类⽬" value="beijing"></el-option></el-select></el-form-item><el-form-item label="标签名称" prop="name" class="tname"placeholder="请输⼊标签名称"><el-input v-model=""></el-input></el-form-item><el-form-item label="标签编码" prop="name" class="tcode"placeholder="请输⼊标签编码"><el-input v-model=""></el-input></el-form-item><el-form-item label="主体类型" prop="ttype" class="ttype"><el-select v-model="ruleForm.region" placeholder="所属标签类⽬"><el-option label="社会法⼈" value="shanghai"></el-option><el-option label="⾃然⼈" value="beijing"></el-option></el-select></el-form-item><el-form-item label="更新周期" prop="ttype" class="tcir"><el-select v-model="ruleForm.region" placeholder="请选择更新周期"><el-option label="每天" value="shanghai"></el-option><el-option label="每周" value="beijing"></el-option><el-option label="每⽉" value="beijing"></el-option><el-option label="每年" value="beijing"></el-option></el-select></el-form-item><span class="syx">是否隐形</span><el-switchv-model="value"active-color="#13ce66"inactive-color="#ff4949"label="是否隐形" class="yx"></el-switch><span class="sbz">备注</span><el-inputlabel="备注"type="textarea":rows="2"placeholder="请输⼊备注信息"v-model="textarea"class="bz"></el-input><h4 class="tagz">标签值分层</h4><el-form-item label="来源表" prop="ttype" class="lyt"><el-select v-model="ruleForm.region" placeholder="请选择搜索选择来源表"><el-option label="测试" value="shanghai"></el-option></el-select></el-form-item><el-form-item label="来源数据项" prop="ttype" class="lyd"><el-select v-model="ruleForm.region" placeholder="请选择搜索来源数据项"><el-option label="测试" value="shanghai"></el-option></el-select></el-form-item><el-table:data="ttable"style="width: 85%" class="ttable"><el-table-columnprop="rule"label="规则"width="280"><el-select v-model="ruleForm.tj" style="width:130px;"><el-option label="测试" value="shanghai"></el-option></el-select><el-input v-model="ruleForm.tji" style="width:110px;"></el-input></el-table-column><el-table-columnprop="tvalue"label="标签值"width="180"><el-input v-model="ruleForm.tji" ></el-input></el-table-column><el-table-columnprop="tms"label="标签描述"><el-input v-model="ruleForm.tji" ></el-input></el-table-column><el-table-columnprop="ms"label="操作"><el-button src="../../assets/image/HTSCIT_.png" circle><img src="../../assets/image/close (2).png" style="width:25px;padding: 0px;"/></el-button> <el-button src="../../assets/image/close(2).png" circle><img src="../../assets/image/HTSCIT_.png" style="width:25px;border: 0px;"/></el-button> </el-table-column></el-table><el-form-item><el-input v-model="input" placeholder="新增标签内容" class="content"></el-input><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >取消</el-button></el-form-item></el-form><el-button slot="reference" class="buttong3">新增</el-button></div></el-dialog></template><script>export default {name: "Popup",data(){return{centerDialogVisible:false,ruleForm:{},rules:'',value:'',textarea:'',ttable:[],input:'',//校验的规则rules: {name: [{ required: true, message: '请输⼊活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],},}}}</script><style lang="scss" scoped>@import "../../assets/styles/index/tag.css";</style>2、在页⾯中添加⾃定义组件的双标签，⽤ref获取组件中想要获取的内容<Popup ref="Popup"></Popup>注：要和弹出按钮(触发单击弹出事件的)有公共的div3、注册组件在页⾯中引⼊⾃定义组件，并且注册import Popup from '/src/components/labelfact/Popup.vue';components:{//注册组件Popup,},s4、在点击事件中打印$refs⾥取到的内容，在打印结果中查找控制弹出状态的属性或者在Dialog标签中查找<el-dialogtitle="新增标签":visible.sync="centerDialogVisible"//⼀般情况下是这个width="80%"center>找到以后把状态指定为弹出this.$refs.Popup.centerDialogVisible = true;运⾏->完美注：弹出框周围要有阴影部分，否则说明⽤错组件了最后：感谢可爱⼩仙⾰的细⼼指导。