jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)


Posted in Javascript onMay 10, 2016

本文实例讲述了jquery点击弹出可放大居中关闭对话框。分享给大家供大家参考,具体如下:

运行效果截图如下:

jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击弹出可放大居中关闭对话框</title>
<link rel="stylesheet" type="text/css" href="css/jqpopup.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/jqDnR.min.js"></script>
<script type="text/javascript" src="js/jquery.jqpopup.min.js"></script>
</head>
<body>
<div id="sampleformdiv" style="display:none" title="1st jQpopup box">
  <div class="annotationName">描述</div>
  <div class="annotation">点击关闭该弹出窗口</div>
</div>
<div id="sampleformdiv1" style="display:none" title="模块选择器">
  <form method="post" id="butt" name="butt" action="">
    <input type="button" value="确定"/>
    <input type="button" value="取消"/>
  </form>
  <div class="sele">
    <select class="u">
      <option value="CMS">CMS</option>
      <option value="General" selected="">General</option>
      <option value="Else">Else</option>
    </select>
    <select class="u">
      <option value="CMS">CMS</option>
      <option value="General" selected="">General</option>
      <option value="Else">Else</option>
    </select>
    <select class="u">
      <option value="CMS">CMS</option>
      <option value="General" selected="">General</option>
      <option value="Else">Else</option>
    </select>
  </div>
  <table border="1" cellpadding="2" cellspacing="2">
    <tr>
      <td></td>
      <td>名称</td>
      <td>标签</td>
      <td>前缀</td>
      <td>...</td>
    </tr>
    <tr>
      <td><input type="radio" value="radio" name="r1" id="r1"></td>
      <td>分类控件</td>
      <td>2</td>
      <td>re</td>
      <td>222</td>
    </tr>
    <tr>
      <td><input type="radio" value="radio" name="r2" id="r2"></td>
      <td>分类控件</td>
      <td>2</td>
      <td>re</td>
      <td>222</td>
    </tr>
    <tr>
      <td><input type="radio" value="radio" name="r3" id="r3"></td>
      <td>分类控件</td>
      <td>2</td>
      <td>re</td>
      <td>222</td>
    </tr>
    <tr>
      <td><input type="radio" value="radio" name="r4" id="r4"></td>
      <td>分类控件</td>
      <td>2</td>
      <td>re</td>
      <td>222</td>
    </tr>
    <tr>
      <td><input type="radio" value="radio" name="r5" id="r5"></td>
      <td>分类控件</td>
      <td>2</td>
      <td>re</td>
      <td>222</td>
    </tr>
  </table>
</div>
<p><input type="button" class="stdbtn" id="open_btn" value="Click 1"/></p><br/>
<p><input type="button" class="stdbtn" id="open_btn1" value="Click 2"/></p><br/>
<script type="text/javascript">
$(document).ready(function(){
  $("#open_btn").click(function(){
    $("#sampleformdiv").jqpopup_open(this.id);
  });
  $("#open_btn1").click(function(){
    $("#sampleformdiv1").jqpopup_open(this.id);
  });
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
Jquery $when done then的用法详解
May 20 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
jQuery选择器基础入门教程
May 10 #Javascript
jquery实现图片上传前本地预览功能
May 10 #Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 #Javascript
基于jquery实现三级下拉菜单
May 10 #Javascript
jQuery Dialog对话框事件用法实例分析
May 10 #Javascript
bootstrap网页框架的使用方法
May 10 #Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 #Javascript
You might like
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PDO::commit讲解
2019/01/27 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Django如何批量创建Model
2020/09/01 Python
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
关于保护环境的标语
2014/06/09 职场文书
大学专科自荐信
2014/06/17 职场文书
护理专科学生自荐书
2014/07/05 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
python tkinter模块的简单使用
2021/04/07 Python
MySql数据库触发器使用教程
2022/06/01 MySQL