原创：Div+CSS+JS的对话框（使用了JQuery）

最新推荐文章于 2019-08-17 11:46:40 发布

xmm218

最新推荐文章于 2019-08-17 11:46:40 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端技术文章标签： CSS jQuery JSP HTML ViewUI

本文链接：https://blog.youkuaiyun.com/xmm218/article/details/83671123

Web前端技术专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种基于HTML、CSS和JavaScript实现的自定义对话框设计方案。该方案通过创建可复用的类来控制对话框的显示与隐藏，并利用遮罩层提升用户体验。通过实例演示了如何根据不同用户角色调整对话框内容。

CSS部分

/*--------div对话框-----------*/

#dialog {
 background-color: #89A6CA;
 height: 180px;
 width: 300px;
 border: 1px solid #999;
 position: absolute;
 z-index:9999;
}
#dialog #title {
 background-image: url(images/pupop_bg.png);
 background-repeat: repeat-x;
 height: 28px;
}
#dialog #title #caption {
 font-family: "宋体";
 font-size: 14px;
 color: #FFF;
 font-weight: bold;
 float: left;
 padding-left: 10px;
 margin-top: 6px;
}
#dialog #title #close {
 float: right;
 margin-right: 10px;
 height: 19px;
 width: 34px;
 background-image: url(images/pupop_bg.png);
 background-position: 0px -30px;
}
#dialog #title #close:hover {
 float: right;
 margin-right: 10px;
 height: 19px;
 width: 34px;
 background-image: url(images/pupop_bg.png);
 background-position: -37px -30px;
}

#dialog #content {
 background-color: #FFF;
 margin-right: 1px;
 margin-bottom: 1px;
 margin-left: 1px;
 height: 151px;
 text-align:center;
}
#mask {
      DISPLAY:block;
      Z-INDEX: 9998;
      FILTER: alpha(opacity=80); 
      LEFT: 0px;
      WIDTH: 100%;
      POSITION: absolute;
      TOP: 0px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #000;
      moz-opacity: 0.8;
      opacity: .80
}

JS部分（类）

function DivDialog(x,y,title,width,height,iframeSrc,closeFunction) {
 this.x=x;
 this.y=y;
 this.title=title;
 this.width=width;
 this.height=height;
 this.iframeSrc=iframeSrc;
 this.closeFunction=closeFunction;
 //初始化对话框
 this.initDialog=function() {
  var diag=document.createElement("div");
  var title=document.createElement("div");
  var caption=document.createElement("div");
  var clo=document.createElement("div");
  var content=document.createElement("div");
  
  var iframelogin=document.createElement("iframe");
  
  document.body.appendChild(diag);
  content.appendChild(iframelogin);
  title.appendChild(caption);
  title.appendChild(clo);
  diag.appendChild(title);
  diag.appendChild(content);
  
  diag.id="dialog";
  diag.style.display="none";
  title.id="title";
  caption.id="caption";
  clo.id="close";
  content.id="content";
  
  iframelogin.id="iframelog";
        iframelogin.frameborder="0";
        iframelogin.scrolling="no";
        iframelogin.width="100%";
        iframelogin.height="100%";
  iframelogin.setAttribute('frameborder','0',0);
 };
 //设置对话框的位置
 this.setDialogPos=function(x,y) {
  this.x=x;
  this.y=y;
  $("#dialog").css("top",y);
  $("#dialog").css("left",x);
 };
 //设置对话框尺寸
 this.setDialogSize=function(width,height) {
  this.width=width;
  this.height=height;
  $("#dialog").css("width",width);
  $("#dialog").css("height",height);
 };
 //设置对话框标题
 this.setDialogTitle=function(title) {
  this.title=title;
  $("#dialog #title #caption").attr("innerHTML",title);
 };
 //设置窗体内容
 this.setDialogIframeSrc=function(iframeSrc) {
  this.iframeSrc=iframeSrc;
  document.getElementById("iframelog").src=iframeSrc;
 };
 //打开对话框
 this.openDialog=function() {
  $("#dialog").fadeIn("normal");
 };
 //关闭对话框
 this.closeDialog=function(closeFunction) {
  this.closeFunction=closeFunction;
  $("#dialog").fadeOut("normal",closeFunction);
 };
}
/*
 * 关机效果类
 */
function Mask() {
 //初始化
 this.initMask=function() {
  var mask=document.createElement("div");
  document.body.appendChild(mask);
  mask.id="mask";
  this.closeMask();
 };
 //关闭
 this.closeMask=function () {
  $("#mask").css("display","none");
 };
 //打开
 this.openMask=function () {
  $("#mask").css("display","block");
 }; 
}
具体使用

//窗口装载
$(document).ready(function(){
 //创建对象
 var diag=new DivDialog();
 var mask=new Mask();
 diag.initDialog();
 mask.initMask();
 //打开管理员
 $("#adminLogin").click(function() { 
  diag.setDialogTitle("管理员登陆");
  diag.setDialogSize(300,180);
  diag.setDialogPos((document.body.clientWidth-diag.width)/2,180);
  diag.setDialogIframeSrc("login/adminlogin.jsp");
  diag.openDialog();
  
  mask.openMask();
 });
 //打开教师登陆对话框
 $("#teacherlogin").click(function() { 
  diag.setDialogTitle("教师登陆");
  diag.setDialogSize(300,180);
  diag.setDialogPos((document.body.clientWidth-diag.width)/2,180);
  diag.setDialogIframeSrc("login/teacherlogin.html");
  diag.openDialog();
  
  mask.openMask();
 });
 //打开学生登陆对话框
 $("#studentlogin").click(function() { 
  diag.setDialogTitle("学生登陆");
  diag.setDialogSize(300,180);
  diag.setDialogPos((document.body.clientWidth-diag.width)/2,180);
  diag.setDialogIframeSrc("login/studentlogin.html");
  diag.openDialog();
  
  mask.openMask();
 });
 //窗口事件
 $(window).resize(function(){
  diag.setDialogPos((document.body.clientWidth-diag.width)/2,180);
 });
 //对话框关闭按钮
 $("#close").click(function(){
  diag.closeDialog(mask.closeMask());
 });
 //遮照
 $("#mask").click(function(){
  diag.closeDialog(mask.closeMask());
 });
 
});