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

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

运行效果截图如下：

具体代码如下：

<!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相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

赞 (0)

相关推荐

  • Jquery实现页面加载时弹出对话框代码

    复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.js"></script> //下载 <script type="text/javascript"> $(document).ready(function(){ alert("您好,欢迎来到Jquery!"); }) </script> 将以上代码置于head标

  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    复制代码 代码如下: //confirm function Confirm(msg, control) {    $.messager.confirm("确认", msg, function (r) {        if (r) {            return true;        }    });    return false;} 复制代码 代码如下: //Loadfunction Load() {    $("<div class=\"da

  • jQuery代码实现对话框右上角菜单带关闭×

    jQuery代码实现对话框右上角菜单带关闭×

    先给大家展示下效果图,具体效果图如下所示,如果大家觉得还不错,请参考实现代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery对话框右上角带关闭× - 何问起</title><base target="_blank" /> <!-- Attach our CSS -->

  • 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    jQuery是一款当之无愧的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. 1.jQuery智能单词提示工具 这是一款可以根据当前输入智能提示单词的插件,效果很棒. 在线演示 /源码下载 2.CSS3实现的Photoshop按钮效果 这是用jQuery和CSS3实现的Photoshop按钮效果. 在线演示 /源码下载 3.jQuery自定义确认对话框

  • jquery删除提示框弹出是否删除对话框

    复制代码 代码如下: /** * 删除草稿 */ function deleteDraft(the,id){ $.messager.confirm('删除草稿提醒', '</br>确定删除这篇草稿吗?</br></br>',function(r){ if(r){ $.ajax({ type : "post", url : "http://localhost:8090/webplus3/_web/sns/delBlog.do?_p=YXM9M

  • JQuery弹出炫丽对话框的同时让背景变灰色

    JQuery弹出炫丽对话框的同时让背景变灰色

    这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色.特地和大家分享分享. 先看效果图:  代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src=&q

  • jquery插件hiAlert实现网页对话框美化

    厌烦了IE浏览器的警告窗,伴随着"咚"恐惧的一声,让人感觉好像有一种坏事情即将来临.而如今各浏览器对网页的弹出警告框(alert).确认对话框(confirm).输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格. hiAlert插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,还提供了渐变提示条效果,弹出网页层效果,它目前兼容各主流浏览器. 使用方法 hiAlert提供了五种方法可以使用: 1.hiAlert hiAler

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

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

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

  • JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

    多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去. 看起来动画效果还是比较cool的,如果加上了处理后的效果更佳: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script sr

  • jQuery Dialog对话框事件用法实例分析

    本文实例讲述了jQuery Dialog对话框事件用法.分享给大家供大家参考,具体如下: Dialog对话框事件 对话框应用场景 对话框是最常用.最实用的功能. 1) 静态提示类对话框,对话框的内容是固定的 2) 动态提示类对话框,对话框内容是根据事件源变化的 3) 遮罩类对话框,对话框弹出时背景变灰并且不可选 使用jQuery UI的Dialog 组件可以轻松实现上面三种效果 Dialog组件的主要特点是可以拖动(Draggable),可以改变大小(Resizable). Dialog对话框的

  • jQuery Mobile的loading对话框显示/隐藏方法分享

    显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();

  • jQuery实现时尚漂亮的弹出式对话框实例

    jQuery实现时尚漂亮的弹出式对话框实例

    本文实例讲述了jQuery实现时尚漂亮的弹出式对话框.分享给大家供大家参考.具体如下: 这是一款十分简洁漂亮的HTML5弹出对话框效果,基于jQuery来实现,引入了jquery1.6.2库. 本效果描述:用鼠标点击一下右上角的小图标,会弹出一个层对话框,里面可以提交留言.评论之类的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="

  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示    源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<

随机推荐