html弹出层代码（html弹框代码）

本篇文章给大家谈谈html弹出层代码，以及html弹框代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html点击按钮怎么弹出一个浮动的窗体？
• 2、html 弹出层
• 3、html5浮动层弹窗 求教 是html代码
• 4、如何把一个html页面做成弹出层
• 5、求点击弹出层的html代码~
• 6、求html代码，点击按钮弹出层，再次点击关闭层？

html点击按钮怎么弹出一个浮动的窗体？

首先根据需求我们需要一个按钮，一个弹出窗口层；\x0d\x0aOK，废话不多说；\x0d\x0a按钮就用一个基本的：\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200px;height:200px;border:solid 1px #000;position:absolute;right:10px;top:100px; line-height:200px;text-align:center;display:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分：\x0d\x0a首先需要引入一个JS库，版本自己定义：\x0d\x0a然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a})

回答于 2022-11-16

html 弹出层

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleLIGHTBOX EXAMPLE/title

style

* {

margin:0;

padding:0

}

html, body {

height: 100%;

width: 100%;

font-size:12px

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 50%;

padding: 6px 16px;

border: 12px solid #D6E9F1;

background-color: white;

z-index:1002;

overflow: auto;

}

.black_overlay {

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color:#f5f5f5;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.close {

float:right;

clear:both;

width:100%;

text-align:right;

margin:0 0 6px 0

}

.close a {

color:#333;

text-decoration:none;

font-size:14px;

font-weight:700

}

.con {

text-indent:1.5pc;

line-height:21px

}

/style

script

function show(tag){

var light=document.getElementById(tag);

var fade=document.getElementById('fade');

light.style.display='block';

fade.style.display='block';

}

function hide(tag){

var light=document.getElementById(tag);

var fade=document.getElementById('fade');

light.style.display='none';

fade.style.display='none';

}

/script

/head

body

a href="javascript:void(0)" onclick="show('light')"打开1/a

a href="javascript:void(0)" onclick="show('light2')"打开2/a

div id="light" class="white_content"

div class="close"a href="javascript:void(0)" onclick="hide('light')" 关闭/a/div

div class="con"

内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

/div

/div

div id="light2" class="white_content"

div class="close"a href="javascript:void(0)" onclick="hide('light2')" 关闭/a/div

div class="con"

内容2

/div

/div

div id="fade" class="black_overlay"/div

/body

/html

html5浮动层弹窗 求教 是html代码

html

style type="text/css"

.black_overlay{    

 display: none;    

 position: absolute;top: 0%;    

 left: 0%;    

 width: 100%;    

 height: 100%;    

 background-color: black;    

 z-index:1001;    

 -moz-opacity: 0.8;    

 opacity:.80;    

 filter: alpha(opacity=80);      

}    

.white_content{    

 display: none;    

 position: absolute;    

 top: 25%;  left: 25%;    

 width: 50%;    

 height: 50%;    

 padding: 16px;    

 border: 16px solid black;    

 background-color: white;    

 z-index:1002;    

overflow:auto    

}    

/style

script type="text/javascript"

/script

    body

    input type="button" text="弹出层" onClick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"

        div id="light" class="white_content"    

   a href="#" onClick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="color:black;z-index:9999"Close/a    

div style="width:715px;height:360px;border:#ccc solid 1px;" id="dituContent"

这里就是弹出的内容

/div    

/div    

    /body

/html

就是这样的。使用postion属性和层的隐藏和显示就实现啦

如何把一个html页面做成弹出层

首先单靠HTML是无法做出弹出层的，必须结合脚本语言javascript语言

至于怎么写实际上很简单，利用dom获取其id，把id传给一个变量，设一个函数，在函数里写获取ID变量的css即可实现，至于怎么写，采纳之后会给你写出代码。要不然辛辛苦苦写了代码最后没有任何回报，心不甘啊，因为我是小白，所以很看重这些的。

求点击弹出层的html代码~

var isIe = (document.all) ? true : false;

//设置select的可见状态

function setSelectState(state) {

var objl = document.getElementsByTagName('select');

for (var i = 0; i objl.length; i++) {

objl[i].style.visibility = state;

}

}

function mousePosition(ev) {

if (ev.pageX || ev.pageY) {

return { x: ev.pageX, y: ev.pageY };

}

return {

x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

//弹出方法

function showMessageBox(wTitle, content, pos, wWidth) {

closeWindow();

var bWidth = parseInt(document.documentElement.scrollWidth);

var bHeight = parseInt(document.documentElement.scrollHeight);

if (isIe) {

setSelectState('hidden');

}

var back = document.createElement("div");

back.id = "back";

var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:" + bWidth + "px;height:" + bHeight + "px;";

styleStr += (isIe) ? "filter:alpha(opacity=0);" : "opacity:0;";

back.style.cssText = styleStr;

document.body.appendChild(back);

showBackground(back, 50);

var mesW = document.createElement("div");

mesW.id = "mesWindow";

mesW.className = "mesWindow";

mesW.innerHTML = "div class='mesWindowTop'table width='100%' height='100%'trtd" + wTitle + "/tdtd style='width:1px;'input type='button' onclick='closeWindow();' style='font-size:12px;cursor:pointer;' title='关闭窗口' class='close' value='关闭' //td/tr/table/divdiv class='mesWindowContent' id='mesWindowContent'" + content + "/divdiv class='mesWindowBottom'/div";

styleStr = "left:" + (((pos.x - wWidth) 0) ? (pos.x - wWidth) : pos.x) + "px;top:" + (pos.y) + "px;position:absolute;width:" + wWidth + "px;";

mesW.style.cssText = styleStr;

document.body.appendChild(mesW);

}

//让背景渐渐变暗

function showBackground(obj, endInt) {

if (isIe) {

obj.filters.alpha.opacity += 1;

if (obj.filters.alpha.opacity endInt) {

setTimeout(function() { showBackground(obj, endInt) }, 5);

}

} else {

var al = parseFloat(obj.style.opacity); al += 0.01;

obj.style.opacity = al;

if (al (endInt / 100))

{ setTimeout(function() { showBackground(obj, endInt) }, 5); }

}

}

//关闭窗口

function closeWindow() {

if (document.getElementById('back') != null) {

document.getElementById('back').parentNode.removeChild(document.getElementById('back'));

}

if (document.getElementById('mesWindow') != null) {

document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));

}

if (isIe) {

setSelectState('');

}

}

//测试弹出

function testMessageBox(ev, ob) {

var objPos = mousePosition(ev);

messContent = "div style='text-align:center;filter:alpha(opacity=60);'img src='" + ob + "' width='600' height='400' //div";

showMessageBox('', messContent, objPos, 620);

}

在前台调用：

onclick="testMessageBox(event,'图片的路径');"

图片路径你比如说在C:\a.jpg,你就可以把路径填进去，这样就OK了，你可以试试

求html代码，点击按钮弹出层，再次点击关闭层？

首先你要写好两条CSS，用以切换控制按钮样式（以下代码中省略宽高等声明）：

.button {background:url(images/1.jpg) center no-repeat;} /* 默认样式 */

.button-hover {background-image:url(images/2.jpg);} /* 鼠标悬停及弹出层时样式 */

然后用JS来控制属性：

var oBtn = document.getElementById('btn'); // 假设按钮的id为btn

var oDiv = document.getElementById('div'); // 假设弹出层的id为div

// 鼠标悬停

oBtn.onmouseover = function() {

    oBtn.className = 'button button-hover'; 

}

// 鼠标移出

oBtn.onmouseout = function() {

    oBtn.className = 'button'; 

}

// 点击按钮

oBtn.onclick = function() {

    if (oDiv.style.display == 'none') { // 如果层是隐藏的

        oDiv.style.display = 'block';

        oBtn.className = 'button button-hover';

    } else { // 如果层是显示的

        oDiv.style.display = 'none';

        oBtn.className = 'button';

    }

}

用jQuery的话代码如下：

var oBtn = $('#btn');

var oDiv = $('#div');

oBtn.hover(function() {

        $(this).addClass('button-hover');

    }, function(){

        $(this).removeClass('button-hover');

}).click(function() {

    if (oDiv.is(':hidden')) {

        oDiv.show();

        $(this).addClass('button-hover');

    } else {

        oDiv.hide();

        $(this).removeClass('button-hover');

    }

});

关于html弹出层代码和html弹框代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。