web开发中经常出现在页面中会弹出相关内容的功能，例如弹出登录块、注册块等等。网页开放中主要通过JavaScript来实现这些功能。今天来整理分析下这方面的实现。
html弹出内容块基本实现方式两种：一、通过弹出html来实现。二、浮动层来实现。
一、弹出html页面。
实现方式：通过open或者其他的js插件弹出指定的html页面。
优点：所有弹出内容的操作全部在一个独立的页面中完成，实现了代码分离功能，使实现代码更加清晰。
缺点：利用js插件受制于插件本身提供的操作限制，而网页本身还有种自己的设计风格，很难找到与自己所需要的效果插件。而大多数这种功能还伴随这一个遮罩的禁用功能，js插件提供的大体都是父页面一个页面的遮罩。而网站开发多数都会使用框架（iframe）这就使得插件的遮罩功能成了累赘，他会单独遮挡框架中内容页面而不是浏览的整个页面。
用open自定义弹出，随着浏览器的不断更新open方法的很多属性已经过时，无法简单的对谈出页面所带的浏览器效果进行操作，例如去掉浏览器的地址栏，浏览器边框等等。产生的问题是解决为实现功能而带来需要解决的问题比需求本身的实现要复杂，产生太多的不必要工作。
二、浮动层实现。
实现方式：在同一个页面创建一个浮动的层（div）来实现弹出效果。
优点：所有操作都发生在同一页面当中，取值和业务实现相对容易。无弹出新的页面没有因浏览器导致的效果差异问题。
缺点：所有功能的实现都汇集在一个页面当中。会导致实现代码量过多，实现逻辑不明显。产生错误的几率增大。排错的工作不易进展。众多的html标签在页面加载时候出现很多有可能不常操作的标签同事加载。这不符合逻辑。影响了代码的工整。
分析总结
本人应用过场大体支持用浮动层来实现这种功能，用JavaScript创建弹出的浮动层内容。这样会把html初始加载弹出标签为题解决，而产生的影响就是增加了JavaScript对html创建的工作量。代码量明显增大，如果全部代码混淆在一块并容易产生代码混乱。为解决对代码带来的弊端，将浮动层的创建的代码和弹出内容的实现功能代码封装在单独的js文件中，通过面向对象方法有一个类（function）的不同方法实现。如果代码过多用几个js文件来封装一个实现类。用JavaScript的继承方式实现。例举代码如下。
页面中弹出登录窗口。弹出窗口js文件代码。
function Lago(){
this.data = function(){
var divIframe = $('<div></div>');
divIframe.addClass('center');
var logoTitle = $('<div></div>');
logoTitle.addClass('inDiv');
logoTitle.html('请用户登录');
logoTitle.appendTo(divIframe);
var nameDiv = $('<div></div>');
nameDiv.addClass('inDiv');
var spanName = $('<span></span>');
spanName.html('用户名:');
spanName.appendTo(nameDiv);
var inputObj = $('<input type="text" id="txtName" />');
inputObj.appendTo(nameDiv);
nameDiv.appendTo(divIframe);
var passDiv = $('<div></div>');
passDiv.addClass('inDiv');
var spanPass = $('<span></span>');
spanPass.html('密 码:');
spanPass.appendTo(passDiv);
var inputPwd = $('<input type="password" id="txtPass" />');
inputPwd.appendTo(passDiv);
passDiv.appendTo(divIframe);
var btnDiv = $('<div></div>');
btnDiv.addClass('inDiv');
var btnSub = $('<input id="bntSub" type="button" value="登录" />');
btnSub.appendTo(btnDiv);
var btnEsc = $('<input id="btnEsc" type="button" value="取消" />');
btnEsc.appendTo(btnDiv);
btnDiv.appendTo(divIframe);
divIframe.appendTo('body');
};
this.addEvent = function(){
$('#bntSub').on('click',function(){
alert('登录');
});
};
}
在整体页面的js文件中调用这个实施弹出内容的js文件相关方法。
产生后果分析
通过上面代码就可以看出，创建弹出效果的html产生的代码非常多。上面只是创建一个登录所需要的代码量。往往会很多。如果要创建的html很复杂那这无疑是个不可忽视的工作量。这个问题可以通过jquery ajax方式来记载显示，例如将要创建的html内容写在文本文件当中，通过jquery操作ajax获取文本文件内容并写入指定位置。
至此发表出来的是我工作中的感触。发不出来与大家探讨，希望有经验的高人可以指点一二。发一篇随笔写一段感受，分享一份苦闷寻求一份指教。
