jquery ui插件实现漂亮弹出对话框方法

关于jquery ui插件简单介绍

jquery ui 是以 jquery 为基础的开源 网页特效 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

用户交互组件
包括draggable 拖动、droppable 放置、resizable 缩放、selectable 复选、sortable 排序。

可视控件
包括accordion 折叠面板、datepicker 日期选择、dialog 对话框、progressbar 进度条、slider 滑块、tabs 标签页。

动画、特效
文档制作中……

如何使用中文文档
浏览入门教程、文档使用指南,开始您的 jquery ui 之旅

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html
xmlns=http://www.111cn.net/>
<head>
<title></title>
<link href="../css教程/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#div1").dialog();
});
</script>
</head>
<body>
<div id="div1">
<table>
<tr><td>用户名</td><td><input type="text" style="width:100px" /></td></tr>
<tr><td>密码</td><td><input type="text" style="width:100px" /></td></tr>
</table>
</div>
</body>
</html>

看一下效果图

时间: 2024-12-22 18:26:22

jquery ui插件实现漂亮弹出对话框方法的相关文章

uploadify插件实现在弹出对话框中,在IE中测试一直报“对象不支持此属性和方法”,但是在火狐和遨游却可以完成实现,未报错。

问题描述 uploadify插件实现在弹出对话框中,在IE中测试一直报"对象不支持此属性和方法",但是在火狐和遨游却可以完成实现,未报错. 解决方案 解决方案二:<tr><tdclass="evenlabel"width="15%"height="25px;"><labelfor="name">选择要上传的文件</label></td><td

jQuery UI插件自定义confirm确认框的方法

 这篇文章主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. ht

jQuery UI插件自定义confirm确认框的方法_jquery

本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)_jquery

我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例)  如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h

jQuery在iframe中无法弹出对话框的解决方法

如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,下面有个不错的处理方法,希望对大家有所帮助 jQuery的弹出框使用很方便,但是如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,这个时候就需要处理这个问题. 其实也非常简单,思路就是让iframe的父窗口弹出这个对话框.例如: parent.confirmDialog(); 这样就可以用了.不是什么有技术含量的问题,记下来

jQuery在iframe中无法弹出对话框的解决方法_jquery

jQuery的弹出框使用很方便,但是如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,这个时候就需要处理这个问题. 其实也非常简单,思路就是让iframe的父窗口弹出这个对话框.例如: parent.confirmDialog(); 这样就可以用了.不是什么有技术含量的问题,记下来,防止忘记.

jQuery实现无插件实现弹出对话框层效果

就 jQuery 而言,就有很多高手们开发好的弹出层插件,甚至连 jQuery 官方也有提供 Dialog UI 组件. 之前写过一些弹出层的效果,也都是借助于别人开发好的 jQuery 插件,这些插件的优点是参数多.功能全.方便调用,但是不可避免地会导致插件脚本过于庞大,很多功能基本用不到,感谢任平生童鞋一语惊醒梦中人,其实弹出的对话框层用 jQuery 来实现是相当简单的,简单到只需要两句 JS,一句是弹出,另一句就是关闭.省去了很多不必要的冗余的功能和 JS 代码. 先来看一下 DEMO,

JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法

jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面效果,easyui的相关地址是:http://jquery-easyui.wikidot.com/: easyui的中文文档地址是:http://www.easyui.net/,本人也利用easeyUI在做一些页面效果.由于我很喜欢那种弹出的对话框界面,因此在界面中应用了Dialog类来处理一些确认的信息,但在利用中发现,弹出的对话框,不能再继续执行asp.net按钮的后台响应代码.界面如下

jQuery 弹出层 弹出对话框

jQuery 弹出层 弹出对话框 可以设置大小,ajax内容弹出,背景等各种调整 演示   XML/HTML Code                   <script> $(document).ready(function() { ClassyLightbox.init({ override:true, background: 'white', centerOnResize: true, fade: true }); $('#alert').click(function() { alert