JQuery 弹出模态窗口

简介: JQuery 弹出模态窗口

index.html

<!DOCTYPE html>
<html>
<head> 
  <!-- Contact Form CSS files -->
  <link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
</head>
<body>
<div>
  <div id='basic-modal'>
    <a href='#' class='basic'>打开弹窗</a>
  </div> 
  <!-- modal content -->
  <div id="basic-modal-content"> 
    这边是弹框中要显示的内容
  </div> 
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' >
  jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();
    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
      $('#basic-modal-content').modal();
      return false;
    });
  });
</script>
</body>
</html>

basic.css

/*
 * SimpleModal Basic Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $
 */
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
CSS 复制 全屏

全部Demo下载

转:https://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html

目录
相关文章
|
前端开发 JavaScript 容器
使用jQuery创建模态窗口登陆效果
来源:GBin1.com 在线下载 在线演示 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中。
1121 0
|
JavaScript 前端开发 HTML5
15款最好的 jQuery Modal(模态窗口)插件
  jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方。模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口。这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件注册,表单等场合。
2173 0
|
JavaScript 开发者
使用jQuery创建模态窗口登陆效果 - WEB开发者
来源:http://www.admin10000.com/document/2737.html#jtss-hi
818 0
|
前端开发 JavaScript 数据格式
Pop Easy – 轻松实现模态窗口的 jQuery 插件
  PopEasy 是一款轻量的 jQuery 插件,可以帮助开发人员容易的创建效果精美的模态窗口。PopEasy 在主流浏览器中都能够正常工作,同时兼容 IE 7 哦。 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理模板 HTML Inspect...
1277 0
|
5天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
40 21
|
6天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
37 16
|
1天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
17 9
|
4天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
6天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
5天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。