html弹框效果(移动Web)

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <title></title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6 <meta name="keywords" content="The free Retina Iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 8
 9 <script src="js/jquery.min.js"></script>
10 <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
11 <link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
12
13 <script>
14     $(document).ready(function() {
15         $(‘.popup-with-zoom-anim‘).magnificPopup({
16             type: ‘inline‘,
17             fixedContentPos: false,
18             fixedBgPos: true,
19             overflowY: ‘auto‘,
20             closeBtnInside: true,
21             preloader: false,
22             midClick: true,
23             removalDelay: 300,
24             mainClass: ‘my-mfp-zoom-in‘
25     });
26 });
27 </script>
28
29 </head>
30 <body>
31 <a class="popup-with-zoom-anim" href="#small-dialog" style="font-weight: bold;"> 报名请点击</a>
32
33 <div id="small-dialog" class="mfp-hide">
34     <div class="pop_up">
35          <h2>现在还不是报名时间!</h2>
36          <p>详情请关注信息学院就业事务中心<br>官方微信:北林信息人<br/>二维码:<br/><center><img style="width:150px;" src="./images/xxtw.jpg"/></center></p>
37     </div>
38 </div>
39
40 </body>
41 </html>
时间: 2024-12-25 22:38:02

html弹框效果(移动Web)的相关文章

JS遮罩层弹框效果

对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹框效果: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

android dialog 模拟新浪、腾讯title弹框效果

http://blog.csdn.net/jj120522/article/details/7764183 首先我们看一下新浪微博的效果(其它就是一个dialog):                点击title前                                                    点击title后 实现方式: 首先我们要自定义一个dialog 代码如下: [java] view plaincopy /*** * 自定义dialog * * @author ji

仿糯米弹框效果demo

代码例如以下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabs</title> <style type="text/css"> /* Remove margin padding */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,d

在wpf中使用winrt的Toast弹框效果

源码地址:https://code.msdn.microsoft.com/windowsdesktop/Sending-toast-notifications-71e230a2/sourcecode?fileId=51047&pathId=611218636 步骤如下: 1,引用C:\Program Files (x86)\Windows Kits\8.0\References\CommonConfiguration\Neutral\Windows.winmd,这是win8系统自带的. 2,引用

自己封装一个弹框插件

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户

JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

Bootstrap:弹出框和提示框效果以及代码展示

(转自Bootstrap:弹出框和提示框效果以及代码展示) 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三

Axure 动态面板实现弹出框效果

今天在画原型图的时候遇到了个弹出框效果的实现,感觉挺有意思的,拿出来share下~ 如图:当我点击删除按钮后,如果用户选择删除,则要求要弹出一个对话框来让用户输入处理备注,如果不要删除,则点击取消: 首先描述下大致思路,我在页面上加上一个动态面板,然后为这个动态面板加上两个状态,一个是显示弹出框,另一个是隐藏弹窗口. 下面是弹出对话框的两个状态的设计: 隐藏状态的动态面板设置为空白,这样当切换到这个状态时就看不到任何东西. 然后为删除按钮添加用例: 注意,这里是当发生单击事件的时候弹出动态面板,