jquery 弹出层

最新推荐文章于 2018-09-18 16:38:35 发布
最新推荐文章于 2018-09-18 16:38:35 发布
阅读量717 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bajiudongfeng/article/details/41846253
版权
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
.theme-popover-mask {
 z-index: 9998;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:#000;
 opacity:0.4;
 filter:alpha(opacity=40);
 display:none
}
.theme-popover {
 z-index:9999;
 position:fixed;
 top:50%;
 left:50%;
 width:660px;
 height:360px;
 margin:-180px 0 0 -330px;
 border-radius:5px;
 border:solid 2px #666;
 background-color:#fff;
 display:none;
 box-shadow: 0 0 10px #666;
}
</style>
<script>
   jQuery(document).ready(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-popover">
        <div class="theme-popbod dform">
           <ol>
                <li style="margin-top:40px;">
                   <strong style="font-size:-webkit-xxx-large;font-family:serif;">验证码：</strong>
                   <input class="ipt" id="code" type="text" name="log" style="width:250px;height:62px;font-size:xx-large"/>
                </li>
                <li><input class="btn btn-primary" style= "width:200px;height:50px;margin-top:50px;font-size:xx-large;font-family:serif" id="confirm" type="submit" name="submit" value="确   认" /></li>
           </ol>
        </div>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>

bajiudongfeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现弹出层效果
12-13
本文实例为大家分享了jQuery实现弹出层的具体代码，供大家参考，具体内容如下 ###jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹出层效果</title> <style> .black_overlay {
jQuery-弹出层
AsaZyf的博客
07-05 445
html：&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jquery弹出层&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery/jquery-1.12.4.min.js" &gt;&amp
Jquery实现弹出层效果
weixin_34381687的博客
08-30 90
<script type="text/javascript"> $(document).ready(function(){ $('.one').click(function(){ //点击a标签 $('.box').show(); 弹出层显示 }); $('span').click(function(){ //点击关...
javascript弹出层组件easyDialog v2.0
jimmy2248的专栏
01-14 728
easyDialog在经过一段时间的使用后，对使用中碰到的一些问题进行了总结，最近花了点时间对原来的代码进行了重构和优化，并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能，从项目的角度来说就是如何能快速的完成项目，而这个版本不仅仅是实现基本的功能，更多的考虑了弹出层如何更好更轻松的应用于项目中。 easyDialog v2.0新增的功能： 1. 增加了默认的弹出层内容模板，
jquery弹出层插件
12-29
《jQuery弹出层插件深度解析》 在Web开发领域，jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示，弹出层（Modal）是不可或缺的一部分，它能够吸引用户的注意力并提供额外的信息或操作...
jquery弹出层特效
10-27
本文将详细探讨"jquery弹出层特效"这一主题，以及相关文件如何实现这一功能。 首先，标题"jquery弹出层特效"指的是使用jQuery库创建的弹出窗口或模态对话框效果。在网页设计中，弹出层通常用于显示警告信息、用户...
jQuery弹出层代码
06-10
《jQuery弹出层代码详解与应用》 在Web开发中，弹出层（Modal）是一种常用的交互设计元素，用于在用户当前浏览的页面上显示额外信息或进行特定操作。jQuery，作为JavaScript的一个轻量级库，提供了丰富的API来简化...
jquery弹出层类代码分享
10-26
《jQuery弹出层类代码详解及应用》 在网页设计中，弹出层是一种常见的交互元素，用于显示额外的信息或进行特定的操作。jQuery库提供了一种简单高效的方式来创建弹出层，使得开发者能够轻松实现这一功能。本文将深入...
jQuery弹出层网页特效
11-10
"jQuery弹出层网页特效"指的是利用jQuery来实现的弹窗或模态框效果，这种效果常用于显示通知、确认对话框、登录表单等，以增强用户交互体验。下面我们将深入探讨jQuery弹出层的实现原理、常见方法以及如何通过提供的...
jquery弹出层
weixin_30577801的博客
09-05 61
这是一个弹出层的插件，有时候做东西的，经常会用到了，所以在次发一下，和大家分享一下！ [task]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/...
jQuery弹出层
风的专栏
12-16 732
弹出层往往需要设置浮动样式position:absolute; 考虑到有一种情况,如： 移动到某一个元素上在其下方或者上方显示一个浮动层，作为提示语句，当鼠标移开该元素或者元素的提示层的时候需要隐藏该层，此时可以考虑在该元素外新增一个div或者其它元素，然后将新增的浮动层的html代码通过js加入到新增的div层容器中，此时就只需要考虑当移除该div层的时候才隐藏该层了。 但是此时要考虑该元素的位置显示问题，因为position:absolute;是相对于与它最相近的position:absolute
jquery的弹出层
专栏
03-26 583
jsp文件<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(function() { $("#test").bind('click',function() { $("#dialog").dia
jQuery之弹出层
The_upside_of_down的博客
09-18 904
大家都知道弹出框，弹出提示、警告用alert、window都可以实现。但是如果让你点击一个事件后，弹出一个小小的界面，而不是一个提示框。我们应该如何实现？在我学习了jquery之后，发现jquery可以实现。但具体过程我还有点模糊，因此学习了别人的代码以及思路。 效果图如下： 通过效果图我们可以看到，第一个界面只有一个简单的点击弹出层的提示按钮，点击后弹出层弹出，...
JS 弹出框 (jquery 弹出层)
热门推荐
chenlaoyang的专栏
01-30 1万+
几种皮肤式样           功能： Js代码   //1. 传入字符串   art.dialog({       content: '我支持HTML'  });   //1. 传入字符串 art.dialog({ content: '我支持HTML' });   效果：     Js代码
Jquery效果之弹出层
weixin_34304013的博客
09-17 97
像这种弹出透明背景层效果很常见了，除部分区域可以操作外其他区域不能操作，目前有提供插件，完全可以实现此种效果。 演示效果 完整实例包下载 主要需要其中两个JS，分别为jquery.js和tipswindown.js两个文件。 下面为调用JS方法的主要代码，命名为index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S...
前端系列之jQuery(jQuery弹出层)
十二指环的博客
01-31 1395
弹出层与使用场景介绍弹出层代码编写html整体结构 <!--弹出层遮罩--> <div id="layer-mask" class="layer-mask"></div> <!--弹出层窗体--> <div id="layer-pop" class="layer-pop"> <!--弹出层关闭按钮--> <div id="layer-close"
jquery弹出层代码
djz917的博客
05-02 910
html+CSS部分：&lt;div class="box"&gt;&lt;/div&gt;&lt;!--演示主体盒子--&gt; &lt;div class="layer"&gt;&lt;!--弹出层盒子--&gt; &lt;div class="icon"&gt;&lt;!--弹出层点击框--&gt; &lt;sp

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值