js实现网页弹出框
效果:点击会更大更好风格的时候弹出页面,并且后面的页面上的按钮不能够使用。
代码实现:js。
知识点:1)js调用dom方法在页面上新建图层;
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
主要方法:var newtag=document.creatElement(“new tag”);
Newtag.innerHTML=”new window code”;
2)js方法禁止链接的使用。
Document.getElementsTagName(“Tagname”);例如:
document.getElementsByTagName("p");获取当前页面内的所有的p标签对象数组,调用 for(var i=0;i<y.length;i++){
y[i].disabled = "disabled";实现对链接的禁用。Disabled为点击的属性。
具体实现方法:
Js:
<script>
var isIe=(document.all)?true:false;
//弹出方法
function showMessageBox(wTitle,content,wWidth,wHeight)
{
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=100);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>"; styleStr="width:"+wWidth+"px;height:"+wHeight+"px;position:absolute;top:50%;left:50%;margin-left:-"+wWidth/2+"px;margin-top:-"+wHeight/2+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//关闭窗口
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'));
}
var x=document.getElementsByTagName("input");
for(var i=0;i<x.length;i++){
x[i].disabled = "";
}
var y=document.getElementsByTagName("a");
for(var i=0;i<y.length;i++){
y[i].disabled = "";
}
}
//测试弹出
function testMessageBox(ev)
{
var c= document.getElementsByTagName("p");
var value;//p标签的值;
var x=document.getElementsByTagName("input");
for(var i=0;i<x.length;i++){
x[i].disabled = "disabled";
}
var y=document.getElementsByTagName("a");
for(var i=0;i<y.length;i++){
y[i].disabled = "disabled";
value=y[i].firstChild.nodeValue;
}
messContent="<div style='padding:20px 0 20px 0;text-align:center'><form action='correctculture.action' name='culture' id='culture' method='post'><table><tr><td><textarea name='m_culture'>"+value+"</textarea><input type='hidden' name='boss' value='lisi'/></td></tr><tr><td><input type='submit' value='提交'/></td></tr></table></form></div>";
showMessageBox(‘窗口标题!',messContent,400,200);
}
CSS:
<style>
!-- 弹出窗口css -->
.mesWindow{
border:#666 1px solid;
background:#999999;
}
.mesWindowTop{
height:30px;
border-bottom:#eee 1px solid;
margin-left:4px;
padding:3px;
font-weight:bold;
text-align:left;
font-size:12px;
}
.mesWindowContent{
margin:4px;
font-size:12px;
}
.mesWindow .close{
height:15px;
width:40px;
border:none;
cursor:pointer;
text-decoration:underline;
background:#fff;
}
</style>
这个能够实现点击链接实现修改的,如果想要其他的功能的话,可以修改红色字体的具体能实现。
转载于:https://blog.51cto.com/3504199/935175