html弹出div
html里面自定义弹出窗口
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的三种布局：DIV+CSS、FLEX、GRID
HTML的三种布局：DIV+CSS、FLEX、GRIDDiv+css布局也就是盒⼦模型，有W3C盒⼦模型，IE盒⼦模型。
盒⼦模型由四部分组成margin、border、padding、content。
怎么区别这两种模型呢，区别在于w3c中的width是content的宽，IE的width是content+border+padding。
具体的可以看下⾯的图：W3C盒⼦（标准盒⼦）：IE盒⼦：Flex弹性布局通过使⽤display：flex；或者display：inline-flex；坏处就是不能再设置⼦元素的float、clear、vertical-align。
在这⾥⾯主要是在元素⾥建⽴主轴（main axis、横向的、⽔平的），交叉轴（cross axis、垂直的，竖向的）。
主轴从左到右，左是main start，右是main end，之间是main size。
交叉轴是从上到下，上是cross start，下是cross end，之间是cross size。
如图所⽰：就⽤这个为例⼦嘛：<div class="box"> <p class="item">1</p> <p class="item">2</p></div>在⽗元素div.box中可以设置的属性有六个：1.flex-direction：row | row-reverse | column | column-reverse;解释：这个主要⽤于设置⼦元素的排列顺序。
row表⽰横向排列，从左到右；row-reverse表⽰横向排列，从右到左；column 表⽰竖向排列，从上到下；column-reverse表⽰竖向排列，从下到上。
2.flex-warp:nowarp | warp | warp-reverse;解释：设置元素的换⾏，nowarp表⽰不换⾏；warp表⽰换⾏，按⼀般的规律换到下⾯去；warp-reverse表⽰换⾏，不过换⾏是换到这⼀⾏的上⾯去。
html自定义弹框
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>。
html基本布局1---div嵌套布局
float:left; width: 100px; height: 100px; background-color: bisque; } .div2{ float:left; width:calc(100% - 100px); height: 100px; background-color: #aaaaaa; }
网络错误400请刷新页面重试持续报错请尝试更换浏览器或网络环境
html基本布局 1---div嵌套布局
需求：div3 宽100R% ,高100px,内部包含div1和div2; div1 宽100px,高100px, 如何使div2宽度充满剩余空间（尽量使用css实现）
解决方案1---弹性盒布局：
.div3{ width: 100%; height: 100px; display: flex;
兼容性参考：
解决方案3---定位+margin：
.div3{ text-align: center; line-height: 100px; width: 100%; height: 100px;
} .div1{
position: absolute; left: 0; width: 100px; height: 100px; background-color: bisque; } .div2{ margin-left: 100px; height: 100px; background-color: #aaaaaa; }
如有其他更好的方案，不吝赐教~
解决方案4---{ text-align: center; line-height: 100px; width: 100%; height: 100px; box-sizing: border-box; padding-left: 100px;
html+js右点击弹出菜单
html+js右点击弹出菜单页⾯引⽤jar 包<link rel="stylesheet" href="../../style/zui.min.css" type="text/css" media="screen" /><script type="text/javascript" src="../../zui/jquery-1.8.3.min.js"></script><script type="text/javascript" src="../../zui/zui.min.js"></script>'jquery.contextmenu.r2.js'<!--右击弹出的下拉菜单--><div style="display:none;"><div class="contextMenu" id="menu" ><ul><li id="add"><i class="icon-add"></i> 添加</li><li id="update"><i class="icon-edit"></i> 修改</li><li id="delete"><i class="icon-exit"></i> 删除</li></ul></div></div><!-- 左侧导航--><div class="indmain" ><div id="centerLeft" class="shenfenleft"><div><span>请选择</span></div><div><input class="input_client text-input" type="text" id="Department"><a href="#" class="button zi_searchEntuser" id="button_search">搜索</a></div><ul class="tree" data-ride="tree" id="tree"></ul></div></div>js ⽂件//右击弹出菜单function loadMenu(){$('ul li a').contextMenu('menu',{//菜单样式menuStyle: {},//菜单项样式itemStyle: {fontFamily : 'verdana',backgroundColor : '#333333',color: 'white',border: 'none',padding: '1px'},//菜单项⿏标放在上⾯样式itemHoverStyle: {color: '#fff',backgroundColor: '#0099CC',border: 'none'},bindings:{'add': function(t, target) {//alert(t.id+"|||"+ );RightOperation("add",,target);// alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());},'update': function(t, target) {RightOperation("update",,target);//alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());},'delete': function(t, target) {RightOperation("delete",,target);//alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());}},onShowMenu: function(e, menu) {if (parseInt(("td:eq(0)", e.currentTarget).text()) > 10) { $("#save", menu).remove(); }(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");return menu;}});}function RightOperation(type,val,target){var list = val.split(":");var num = list[0];var id =list[1];var name = list[2];//添加级别if(type=="add"){if(num.indexOf("one")!=-1){ //操作区级单位dialog.confirm("省级名称：<input type='text' id='unit_name' value='' style='width:180px;border:1px solid #cccccc' /><br/><br/>" + "省级编码：<input type='text' id='unit_code' value='' style='width:180px;border:1px solid #cccccc'/><br/>",function(){//调⽤新增⽅法添加医院var unit_name = ("#unit_name").val(); var unit_code =("#unit_code").val();var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = unit_name.match(reg);if(unit_name==""){dialog.alert("区级名称不能为空");back;}if(unit_code==""){dialog.alert("区级编码不能为空");back;}if(r==null){dialog.alert("区级名称只能输⼊数字、字母、汉字");back;}var reg1 = /^[A-Za-z0-9]*$/;var d = unit_code.match(reg1);if(d==null){dialog.alert("区级编号只能输⼊数字、字母");back;}//var city_code =? //市级编码var data = {"unit_name":unit_name,"unit_code":unit_code,"city_code":id};insertUnit(data,target,unit_name,unit_code);;//动态加载右键事件loadMenu();},function(){});}else if(num.indexOf("two")!=-1){ //操作医院单位dialog.confirm("市(地级)级名称：<input type='text' id='org_name' value='' style='width:180px;border:1px solid #cccccc' /><br/><br/>" + "市(地级)级编码：<input type='text' id='org_code' value='' style='width:180px;border:1px solid #cccccc'/><br/>",function(){//调⽤新增⽅法添加医院var org_name = ("#org_name").val(); var org_code =("#org_code").val();var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = org_name.match(reg);var reg1 = /^[A-Za-z0-9]*$/;var d = org_code.match(reg1);if(org_name==""){dialog.alert("医院名称不能为空");back;}if(org_code==""){dialog.alert("医院编码不能为空");back;}if(r==null){dialog.alert("医院名称只能输⼊数字、字母、汉字");back;}if(d==null){dialog.alert("医院编号只能输⼊数字、字母");back;}//var unit_code =?var data = {"org_name":org_name,"org_code":org_code,"unit_code":id};insertOrg(data);//添加医院节点$(target).parent().next().append('<div id="sfgc94" class="fff"><a style="padding-left: 20px;" name="three:'+org_code+':'+org_name+'" data-id="'+org_code+'" id="three003"><i class="icon-pack-2" style="color: #0099CC; font-size: 14px;"></i>'+org_name+'</a></div><divclass="ps" id="fgcthree003" style="display:block"></div>');//动态加载右键事件loadMenu();},function(){});}else if(num.indexOf("three")!=-1){ //操作科室单位dialog.confirm("县级名称：<input type='text' id='DepartmentName' value='' style='width:180px;border:1px solid #cccccc' /><br/><br/>" + "县级编码：<input type='text' id='DepartmentCode' value='' style='width:180px;border:1px solid #cccccc'/>",function(){//调⽤新增⽅法添加科室var DepartmentName = ("#DepartmentName").val(); var DepartmentCode =("#DepartmentCode").val();var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = DepartmentName.match(reg);var reg1 = /^[A-Za-z0-9]*$/;var d = DepartmentCode.match(reg1);if(DepartmentName==""){dialog.alert("科室名称不能为空");back;}if(DepartmentCode==""){dialog.alert("科室编码不能为空");back;}if(r==null){dialog.alert("区级名称只能输⼊数字、字母、汉字");back;}if(d==null){dialog.alert("区级编号只能输⼊数字、字母");back;}var data = {"department_name":DepartmentName,"department_code":DepartmentCode,"org_code":id};insertDepartment(data);//添加科室节点$(target).parent().next().append('<div class="bb"><a name="four:'+DepartmentCode+':'+DepartmentName+'" id="'+DepartmentCode+'"><i class="icon-about-us" style="color: #cccccc; font-size: 14px;"></i>'+DepartmentName+'</a></div>');//动态加载右键事件loadMenu();},function(){});} else if(num.indexOf("four")!=-1){dialog.alert("科室下⾯⽆需添加！");}}//修改级别else if(type=="update"){if(num.indexOf("one")!=-1){dialog.confirm("市级名称：<input type='text' id='city_name' style='width:180px;border:1px solid #cccccc' value='"+name+"'/><br/>", function(){//调⽤新增⽅法添加医院var city_name = $("#city_name").val();var city_code = id;var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = city_name.match(reg);if(city_name==""){dialog.alert("市级名称不能为空");back;}if(r==null){dialog.alert("市级名称只能输⼊数字、字母、汉字");back;}var data = {"city_name":city_name,"city_code":city_code};updateCity(data);$(target).html(city_name)},function(){});}else if(num.indexOf("two")!=-1){dialog.confirm("区级名称：<input type='text' id='unit_name' style='width:180px;border:1px solid #cccccc' value='"+name+"' /><br/>", function(){//调⽤新增⽅法添加医院var unit_name = $("#unit_name").val();var unit_code = id;var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = unit_name.match(reg);if(unit_name==""){dialog.alert("区级名称不能为空");back;}if(r==null){dialog.alert("区级名称只能输⼊数字、字母、汉字");back;}var data = {"unit_name":unit_name,"unit_code":unit_code};updateUnit(data);$(target).html('<i class="icon-address" style="color: #0099CC; font-size: 14px;"></i>' + unit_name);},function(){});}else if(num.indexOf("three")!=-1){dialog.confirm("医院名称：<input type='text' id='org_name' style='width:180px;border:1px solid #cccccc' value='"+name+"' /><br/>", function(){//调⽤新增⽅法添加医院var org_name = $("#org_name").val();var org_code = id;var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = org_name.match(reg);if(org_name==""){dialog.alert("医院名称不能为空");back;}if(r==null){dialog.alert("医院名称只能输⼊数字、字母、汉字");back;}//var unit_code =?var data = {"org_name":org_name,"org_code":org_code};updateOrg(data);$(target).html('<i class="icon-add" style="color: #0099CC; font-size: 14px;"></i>' + org_name + '</a>')},function(){});}else if(num.indexOf("four")!=-1){dialog.confirm("科室名称：<input type='text' id='DepartmentName' style='width:180px;border:1px solid #cccccc' value='"+name+"' />", function(){//调⽤新增⽅法添加科室var DepartmentName = $("#DepartmentName").val();var DepartmentCode = id;var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;var r = DepartmentName.match(reg);if(DepartmentName==""){dialog.alert("科室名称不能为空");back;}if(r==null){dialog.alert("科室名称只能输⼊数字、字母、汉字");back;}var data = {"department_name":DepartmentName,"department_code":DepartmentCode};updateDepartment(data);$(target).html('<i class="icon-about-us" style="color: #cccccc; font-size: 14px;"></i>'+DepartmentName); },function(){});}}//删除级别else if(type=="delete"){if(num.indexOf("one")!=-1){dialog.confirm("是否删除<br/>",function(){var data = {"city_name":name,"city_code":id};citySelectUnit(id);if(unitname.length==0){deleteCity(data,target);}else{dialog.alert("该城市下还存在区级信息，不能直接删除！");}},function(){return;});}else if(num.indexOf("two")!=-1){dialog.confirm("是否删除<br/>",function(){var data = {"unit_name":name,"unit_code":id};unitCodeSelectOrg(id);if(Hospitalinfo.length==0){deleteUnit(data,target);}else{dialog.alert("该区下还存在医院信息，不能直接删除！");}// (target).remove();//(target).parent().html("");},function(){});}else if(num.indexOf("three")!=-1){dialog.confirm("是否删除<br/>",function(){var data = {"org_name":name,"org_code":id};orgCodeSelectDepartment(id);if(Department.length==0){deleteOrg(data,target);}else{dialog.alert("该医院下还存在科室信息，不能直接删除！");}// (target).parent().parent().html("");//(target).parent().siblings(1).html("");},function(){});}else if(num.indexOf("four")!=-1){dialog.confirm("是否删除<br/>",function(){var data = {"department_name":name,"department_code":id};deleteDepartment(data,target);},function(){});}}}Processing math: 100%。
html中div的用法
html中div的用法HTML中Div的用法HTML是一种标记语言，用于创建网页和其他在线文档。
其中，Div是HTML中最常见的标签之一，它可以帮助开发者将网页内容分组并进行样式控制。
下面将详细介绍Div的用法。
1.什么是Div？Div全称为“division”，意为“分割”，它是HTML中最常见的块级元素之一，用于将文档分成若干个独立的部分，并为这些部分设置样式。
2.如何使用Div？在HTML中使用Div非常简单，只需要在代码中添加<div>标签即可。
例如：<div><h1>这是一个标题</h1><p>这是一个段落。
</p></div>上述代码使用了一个<div>标签来包含一个标题和一个段落。
这个<div>标签可以被视为单独的区域，并且可以对该区域进行样式控制。
3.如何设置Div的样式？通过CSS（层叠样式表）可以对页面元素进行样式控制，包括对Div进行样式设置。
下面介绍几种常见的设置方式：（1）设置背景色可以使用background-color属性来设置背景色。
例如：<div style="background-color: #f1f1f1;"><h1>这是一个标题</h1><p>这是一个段落。
</p></div>上述代码设置了一个灰色背景的Div。
（2）设置边框可以使用border属性来设置Div的边框。
例如：<div style="border: 1px solid black;"><h1>这是一个标题</h1><p>这是一个段落。
</p></div>上述代码设置了一个黑色边框的Div。
（3）设置宽度和高度可以使用width和height属性来设置Div的宽度和高度。
js控制div弹出层实现方法
js控制div弹出层实现⽅法本⽂实例讲述了js控制div弹出层实现⽅法。
分享给⼤家供⼤家参考。
具体分析如下：这是个功能很好，且容易调⽤和控制的弹出层。
感兴趣的朋友可以调试运⾏⼀下看看效果如何~O(∩_∩)O~<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出窗⼝(可拖动，背景灰⾊透明)</title><script type="text/javascript"><!--/*FileName:AlertMsg.jstitle:提⽰标题content:提⽰的内容*/document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")function $(id){ return document.getElementById(id)}function AlertMsg(title,content){var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><inpu //弹出窗⼝设置msgw = 300; //窗⼝宽度msgh = 150; //窗⼝⾼度msgbg = "#FFF"; //内容背景msgcolor = "#000"; //内容颜⾊bordercolor = "#000"; //边框颜⾊titlecolor = "#FFF"; //标题颜⾊titlebg = "#369"; //标题背景//遮罩背景设置var sWidth,sHeight;sWidth = screen.availWidth;sHeight = document.body.scrollHeight;//创建遮罩背景var maskObj = document.createElement("div");maskObj.setAttribute('id','maskdiv');maskObj.style.position = "absolute";maskObj.style.top = "0";maskObj.style.left = "0";maskObj.style.background = "#777";maskObj.style.filter = "Alpha(opacity=30);";maskObj.style.opacity = "0.3";maskObj.style.width = sWidth + "px";maskObj.style.height = sHeight + "px";maskObj.style.zIndex = "10000";document.body.appendChild(maskObj);//创建弹出窗⼝var msgObj = document.createElement("div")msgObj.setAttribute("id","msgdiv");msgObj.style.position ="absolute";msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";msgObj.style.width = msgw + "px";msgObj.style.height = msgh + "px";msgObj.style.fontSize = "12px";msgObj.style.background = msgbg;msgObj.style.border = "1px solid " + bordercolor;msgObj.style.zIndex = "10001";//创建标题var thObj = document.createElement("div");thObj.setAttribute("id","msgth");thObj.className = "DragAble";thObj.style.cursor = "move";thObj.style.padding = "4px 6px";thObj.style.color = titlecolor;thObj.style.background = titlebg;var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";thObj.innerHTML = titleStr;//创建内容var bodyObj = document.createElement("div");bodyObj.setAttribute("id","msgbody");bodyObj.style.padding = "10px";bodyObj.style.lineHeight = "1.5em";bodyObj.innerHTML = con;var txt = document.createTextNode(content)bodyObj.appendChild(txt);//⽣成窗⼝document.body.appendChild(msgObj);$("msgdiv").appendChild(thObj);$("msgdiv").appendChild(bodyObj);}function CloseMsg(){//移除对象document.body.removeChild($("maskdiv"));$("msgdiv").removeChild($("msgth"));$("msgdiv").removeChild($("msgbody"));document.body.removeChild($("msgdiv"));}//拖动窗⼝var ie = document.all;var nn6 = document.getElementById&&!document.all;var isdrag = false;var y,x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";return false;}}function initDrag(e) {var oDragHandle = nn6 ? e.target : event.srcElement;var topElement = "HTML";while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;}if (oDragHandle.className=="DragAble") {isdrag = true;oDragObj = oDragHandle.parentNode;nTY = parseInt(oDragObj.style.top);y = nn6 ? e.clientY : event.clientY;nTX = parseInt(oDragObj.style.left);x = nn6 ? e.clientX : event.clientX;document.onmousemove = moveMouse;return false;}}document.onmousedown = initDrag;document.onmouseup = new Function("isdrag=false");//--></script></head><body><table width="600" border="0" cellspacing="0" cellpadding="0"><tr ><td height="100" align="center" ><p><a href="javascript:AlertMsg("温馨提⽰",'')">点我试试!</a></p> </td></tr></table></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。
用DIV实现弹出窗口
用DIV实现弹出窗口弹出窗口是一种常见的网页设计元素，它可以在当前网页中打开一个新的浮动窗口，显示更多的内容或者提供额外的功能。
这种技术通常使用DIV元素配合HTML、CSS和JavaScript进行实现。
以下是一个使用DIV 实现弹出窗口的例子，介绍了实现过程和一些注意事项。
<div class="popup-container"><button id="popup-button">弹出窗口</button><div id="popup" class="popup"><div class="popup-content"><button id="close-button">关闭</button><h2>弹出窗口示例</h2><p>这是一个使用DIV实现的弹出窗口示例。
</p></div></div></div>CSS代码：.popup-containerposition: relative;.popupdisplay: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 400px;padding: 20px;background-color: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.3);border-radius: 5px;.popup-contenttext-align: center;JavaScript代码：document.getElementById("popup-button").addEventListener("click", functiodocument.getElementById("popup").style.display = "block";});document.getElementById("close-button").addEventListener("click", functiodocument.getElementById("popup").style.display = "none";});以上代码使用了一个包含弹出窗口内容的DIV元素，并设置了相关的CSS样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
!DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN TRxhtml1DTDxhtml1-transitional.dtd
html xmlns=1999xhtml
head
meta http-equiv=Content-Type content=texthtml; charset=utf-8
title無標題文件title
style type=textcss
{
margin0;
padding0;
}
html,body{
width100%;
height100%;
}
#mask{
positionabsolute;
z-index888;
background-color#cccccc;
displaynone;
top0;
left0;
filterAlpha(opacity=50);此處用於IE不透明度為半透明百分比
-moz-opacity0.5; 此處用於舊版火狐不透明數
opacity0.5;此處用於新版火狐不透明數值
}
#view{
positionabsolute;
width450px;
height450px;
z-index999;視圖div的z-index要大於遮蓋層的
displaynone;
top0px;
left50%;
background-color#ffffff;
border1px solid green;
}
style
script type=textjavascript
function showDiv(){
var mask = document.getElementById(mask);
var view = document.getElementById(view);
计算当前页面的大小
var h_c =document.documentElement.scrollHeight;
var w_c = document.documentElement.scrollWidth;
var h_b = document.body.scrollHeight;
var w_b = document.body.scrollWidth ;
var height = h_c h_b h_c h_b;
var width = w_c w_b w_c w_b;
显示视图层
mask.style.width = width+px;
mask.style.height = height+px;
mask.style.display = block;
显示视图层
450為div的寬
view.style.left = (width-450)2 + px;
450為div的高
view.style.top = document.documentElement.scrollTop+(document.documentElement.clientHeight-450)2 + px;
view.style.display=block;
}
function hiddenDiv(){
var view = document.getElementById(view);
view.style.display = none;
var mask = document.getElementById(mask);
mask.style.display = none;
}
script
head
body
div
p模拟原始页面,a href=javascriptshowDiv();弹出窗口a
div
!--全屏覆盖层--
div id=mask
div
div id=viewa href=javascripthiddenDiv();关闭窗口adiv body
html。