基于Jquery的dialog插件

最新推荐文章于 2025-05-31 11:02:14 发布

pythoner

最新推荐文章于 2025-05-31 11:02:14 发布

阅读量154

点赞数

分类专栏： Javascript 文章标签： jQuery CSS HTML Ajax JavaScript ViewUI

Javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一款自定义的基于jQuery的对话框插件，该插件可用于网页中弹出窗体显示信息。作者提供了完整的dialog.js文件代码及对应的CSS样式文件，实现了包括关闭功能在内的多种操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做网站的时候经常需要用到弹出窗体显示一些信息，然而网络上找到的一些JS实现的窗体代码有时候并不能使我们满意，于是乎就自己动手实现了一个基于jquery的dialog插件。因为能力有限，不当之处请指正。
1. dialog.js文件代码


var dialogFirst=true;
function dialog(title,content,width,height,cssName){

  if(dialogFirst==true){
        var temp_float=new String;
        temp_float="<div id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;\"></div>";
        temp_float+="<div id=\"floatBox\" class=\"floatBox\">";
        temp_float+="<div class=\"title\"><h4></h4><span>关闭</span></div>";
        temp_float+="<div class=\"content\"></div>";
        temp_float+="</div>";
        $("body").append(temp_float);
        dialogFirst=false;
  }

  $("#floatBox .title span").click(function(){
        $("#floatBoxBg").animate({opacity:"0"},"normal",function(){$(this).hide();});
        $("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();});
  });

  $("#floatBox .title h4").html(title);
  contentType=content.substring(0,content.indexOf(":"));
  content=content.substring(content.indexOf(":")+1,content.length);
  switch(contentType){
        case "url":
          var content_array=content.split("?");
          $("#floatBox .content").ajaxStart(function(){
                $(this).html("loading...");
          });
          $.ajax({
                type:content_array[0],
                url:content_array[1],
                data:content_array[2],
                error:function(){
                  $("#floatBox .content").html("error...");
                },
                success:function(html){
                  $("#floatBox .content").html(html);
                }
          });
          break;
        case "text":
          $("#floatBox .content").html(content);
          break;
        case "id":
          $("#floatBox .content").html($("#"+content+"").html());
          break;
        case "iframe":
          $("#floatBox .content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+(parseInt(height)-30)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" mar$
  }

  $("#floatBoxBg").show();
  $("#floatBoxBg").animate({opacity:"0.5"},"normal");
  $("#floatBox").attr("class","floatBox "+cssName);
  $("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2))+"px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px$
  $("#floatBox").animate({top:($(document).scrollTop()+50)+"px"},"normal");
}

2.对应的css文件dialog.css


#floatBoxBg
{
  display:none;
  width:100%;
  height:100%;
  /*background:#000;*/
  position:absolute;
  top:0;
  left:0;
}

.floatBox
{
  border:#A7BBDE 5px solid;
  width:300px;
  position:absolute;
  top:100px;
  left:40%;
}

.floatBox .title
{
  height:23px;
  padding:7px 10px 0;
  background:#4E76C0;
  color:#fff;
}

.floatBox .title h4
{
  float:left;
  padding:0;
  margin:0;
  font-size:14px;
  line-height:16px;
}

.floatBox .title span
{
  float:right;
  cursor:pointer;
}

.floatBox .content
{
  padding:20px 15px;
  background:#fff;
}