博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery点击弹出窗口--遮罩效果--弹出框
阅读量:5269 次
发布时间:2019-06-14

本文共 1694 字,大约阅读时间需要 5 分钟。

前段时间想做一个直接再页面上做一个弹出框做修改和新增的功能,查了很多都是收费的,翻来覆去最后在runjs上找到了一个不错的效果,修一修就可以用了,感谢大牛的分享

HTML源码:

<!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="http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/lanrenzhijia.css">
 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/jquery-1.8.0.min.js"></script>
<script>
 jQuery(document).ready(function($) {
  $('.theme-login').click(function(){
   $('.theme-popover-mask').fadeIn(100);
   $('.theme-popover').slideDown(200);
  })
  $('.theme-poptit .close').click(function(){
   $('.theme-popover-mask').fadeOut(100);
   $('.theme-popover').slideUp(200);
  })
 
 })
</script>
 
</head>

<body>

 <div class="theme-buy">
  <a class="btn btn-primary btn-large theme-login" href="javascript:;">点击查看效果</a>
 </div>
 
  <div class="theme-popover">
       <div class="theme-poptit">
            <a href="javascript:;" title="关闭" class="close">×</a>
            <h3>登录 是一种态度</h3>
       </div>
       <div class="theme-popbod dform">
             <form class="theme-signin" name="loginform" action="" method="post">
                  <ol>
                       <li><h4>你必须先登录!</h4></li>
                       <li><strong>用户名:</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
                       <li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
                       <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
                  </ol>
             </form>
       </div>
  </div>
  <div class="theme-popover-mask"></div>
</body>
</html>

转载于:https://www.cnblogs.com/tmeng/p/9154313.html

你可能感兴趣的文章
adidas crazylight 2018 performance analysis review
查看>>
typeset shell 用法
查看>>
python 之 循环语句
查看>>
心得25--JDK新特性9-泛型1-加深介绍
查看>>
[转]ceph网络通信模块_以monitor模块为例
查看>>
HDOJ 1754 I Hate It(线段树基本操作)
查看>>
latex tree
查看>>
安装NVIDIA驱动时禁用自带nouveau驱动
查看>>
HDU-1255 覆盖的面积 (扫描线)
查看>>
css3学习01
查看>>
【USACO】 奶牛会展
查看>>
继承和多态
查看>>
Dijkstra+计算几何 POJ 2502 Subway
查看>>
修复IE不能执行JS的方法
查看>>
程序员究竟该如何提高效率zt
查看>>
希尔排序法(缩小增量法)
查看>>
PHP编程基础学习(一)——数据类型
查看>>
MongoDB-JAVA-Driver 3.2版本常用代码全整理(2) - 查询
查看>>
NPOI处理Word文本中上下角标
查看>>
Android笔记 Handler
查看>>