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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
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使用Session和文件统计在线人数
2015/07/04 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
物业管理求职自荐信
2013/09/25 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
公司承诺书范文
2014/05/19 职场文书
职工年度考核评语
2014/12/31 职场文书
欢迎新生标语2015
2015/07/16 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
python 三边测量定位的实现代码
2021/04/22 Python