`
huangro
  • 浏览: 332689 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

基于Jquery的dialog插件

阅读更多
做网站的时候经常需要用到弹出窗体显示一些信息,然而网络上找到的一些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;
}



如需转载请标明出处:http://huangro.iteye.com/admin/blogs/405919

分享到:
评论

相关推荐

    jQueryDialog 插件使用范例

    现在,让我们深入了解一下jQueryDialog插件的使用及其相关知识点。 首先,`jquery.min.js`是jQuery的核心库,它提供了一套简洁的API,使得JavaScript操作DOM、处理事件、执行异步请求等任务变得更为简便。在使用...

    基于jquery的dialog插件

    "基于jQuery的dialog插件"是一种扩展jQuery功能的组件,用于实现弹出对话框效果,通常用于展示警告信息、确认操作或者进行表单输入等场景。 这个自编写的dialog插件以其轻量级而著称,仅有3KB大小,这意味着它对...

    jquery dialog简单实现插件

    这个插件是基于jQuery框架构建的,主要用于创建模态或非模态的窗口,通常用于显示警告、确认信息或者作为用户交互的容器。下面我们将深入探讨jQuery Dialog的基本用法、特性以及如何自定义样式。 1. **基本使用** ...

    jQuery Dialog 弹出层对话框插件(可加载url地址)

    jQuery Dialog是基于jQuery和jQuery UI库构建的,它提供了一种模态或非模态的对话框,可以用来显示警告、确认信息,或者作为一个独立的窗口来展示内容。基本使用方式是选择一个元素,然后调用`.dialog()`方法: ```...

    jquery dialog插件

    这个插件是基于jQuery框架,使得对话框的创建和操作变得简单且功能强大。 首先,我们需要了解jQuery UI库,它是jQuery的一个扩展,提供了丰富的用户界面效果和交互组件,如拖放功能、日期选择器、滑块、排序等,而...

    jQuery插件 dialog

    这个插件基于 jQuery UI 库,它继承了 jQuery 的简洁API,并且增加了丰富的界面元素和交互设计。在网页开发中,dialog 插件常用于显示警告、确认信息、详情展示或者创建模态窗口。 首先,我们来详细了解一下 jQuery...

    jQuery可拖动提示窗插件(对话框Dialog插件)

    首先,jQuery Dialog插件是基于流行的JavaScript库jQuery构建的,它扩展了jQuery UI框架的功能。jQuery UI提供了许多界面元素和交互效果,对话框就是其中的重要组成部分。通过这个插件,开发者可以轻松创建可自定义...

    jQuery对话框Dialog弹出层插件演示与使用说明

    这个插件是基于 jQuery 库构建的,因此在使用前确保已经引入了 jQuery。下面将详细介绍如何使用 jQuery Dialog 插件,包括其基本功能、选项设置、方法调用以及事件监听。 ### 基本使用 首先,你需要在页面中引入 ...

    jquery_dialog jquery_dialog jquery_dialog

    它基于jQuery框架,提供了丰富的功能和灵活的定制选项,使得开发者能够轻松地在网页上实现弹出式窗口、警告提示、确认对话框等交互效果。本文将对jQuery Dialog进行深入探讨,并结合实践应用,帮助读者掌握其核心...

    jquery dialog弹出层

    描述中提到的“基于jquery项目中用到的dialog弹出层”,意味着在实际的jQuery项目开发中,Dialog常被用于增强用户体验,提供额外的信息展示或者获取用户输入。它能够轻松地嵌入到现有的HTML结构中,通过调用jQuery...

    基于jquery的一个Dialog插件

    基于jQuery的Dialog插件是jQuery UI的一部分,它提供了一种优雅的方式来实现弹出对话框功能,用于显示警告、确认或者提供用户输入。然而,有时候开发者可能需要根据特定需求定制更轻量级或更方便的弹框解决方案。...

    dialog:一个jquery dialog插件

    jQuery Dialog基于jQuery库,因此在使用前需要确保页面已经引入了jQuery。同时,为了使用Dialog功能,还需要引入jQuery UI库。这两个库可以通过CDN或者本地文件的方式引入到HTML文档中。 ```html ...

    jQuery扁平风格对话框插件Dialogbox.zip

    jQuery Dialogbox是一款基于jQuery库的扁平化设计对话框插件,它提供了丰富的对话框样式和功能,适用于各种用户交互场景。以下是对该插件及其相关知识点的详细说明: 1. **jQuery基础**:Dialogbox是jQuery的一个...

    原生jQuery对话框插件dialogBox

    这个插件是基于jQuery库设计的,因此,熟悉jQuery基础的开发者可以快速上手。下面将详细阐述dialogBox的主要特点、功能及其在实际应用中的用法。 首先,dialogBox提供了9种不同类型的对话框,包括警告、确认、提示...

    Dialog基于jQuery弹出层对话框插件.zip

    Dialog基于jQuery弹出层对话框插件是一种广泛应用于网页交互中的组件,它允许开发者在页面上创建可定制的、交互式的对话窗口。该插件利用了JavaScript库jQuery的强大功能,结合CSS3技术,实现了丰富的动画效果和灵活...

    jquery-ui-dialog-demo

    `jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例,它提供了丰富的交互式对话框功能,包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开(open)模式。这个插件使得在...

    JQuery UI Dialog使用样例

    jQuery UI 是一个基于 jQuery 的用户界面库,提供了丰富的交互组件,其中 Dialog(对话框)是一个非常实用的功能。Dialog 可以用于创建模态或非模态窗口,通常用于显示警告、确认信息或者进行表单输入等场景。在本篇...

    dialog插件

    这款特定的"Dialog插件"可能是基于jQuery UI库的一个定制版本,因为文件名"jquery-ui-1.10.3.custom"暗示了它是jQuery UI 1.10.3的一个自定义构建。 jQuery UI是jQuery库的一个扩展,它提供了一整套用户界面元素和...

    jquery.dialog.js 经典弹出框附案例代码

    `jQuery.dialog.js`是基于jQuery库的一个经典弹出框插件,它为网页开发者提供了方便、灵活的对话框功能。这个插件使得在网页中创建模态或非模态的对话框变得轻而易举,无需复杂的HTML和CSS布局,大大简化了前端交互...

    Jquery dialog

    jQuery Dialog 基于 jQuery UI,可以与其他 jQuery UI 组件结合使用,如 Datepicker 或 Slider。同时,社区提供了许多第三方插件来增强 Dialog 的功能。 ### 示例代码 下载的压缩包 `jquery-jquery-ui-8226f9f` ...

Global site tag (gtag.js) - Google Analytics