zoukankan      html  css  js  c++  java
  • CSS3/jQuery自己定义弹出窗体

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用

    引入style.css   index.js

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>index.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=gbk">
        <link href="style.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
      <div class="md-modal md-effect-1" id="modal-1">
    		<div class="md-content">
    			<h3>
    				CSS3/jQuery自己定义弹出窗体 多种弹出动画
    			</h3>
    			<div>
    				<ul>
    					<li>
    						这是一款利用jQuery和CSS3实现的自己定义弹出窗体,这可比浏览器默认的弹出窗体美丽多了.
    					</li>
    					<li>
    						弹出窗体中能够自己定义html,十分灵活.
    					</li>
    					<li>
    						另外最重要的一个特点是,它利用了jQuery和CSS3能够实现非常多种弹出窗体动画效果,挺酷的.
    					</li>
    				</ul>
    				<button class="md-close">
    					关闭!
    				</button>
    			</div>
    		</div>
      </div>
      <div class="md-modal md-effect-2" id="modal-2">
    		<div class="md-content">
    			<h3>
    				CSS3/jQuery自己定义弹出窗体 多种弹出动画
    			</h3>
    			<div>
    				<ul>
    					<li>
    						这是一款利用jQuery和CSS3实现的自己定义弹出窗体,这可比浏览器默认的弹出窗体美丽多了.
    					</li>
    					<li>
    						弹出窗体中能够自己定义html,十分灵活.
    					</li>
    					<li>
    						另外最重要的一个特点是。它利用了jQuery和CSS3能够实现非常多种弹出窗体动画效果,挺酷的.
    					</li>
    				</ul>
    				<button class="md-close">
    					关闭!
    				</button>
    			</div>
    		</div>
      </div>
      <div class="md-modal md-effect-3" id="modal-3">
    		<div class="md-content">
    			<h3>
    				CSS3/jQuery自己定义弹出窗体 多种弹出动画
    			</h3>
    			<div>
    				<ul>
    					<li>
    						这是一款利用jQuery和CSS3实现的自己定义弹出窗体,这可比浏览器默认的弹出窗体美丽多了.
    					</li>
    					<li>
    						弹出窗体中能够自己定义html。十分灵活.
    					</li>
    					<li>
    						另外最重要的一个特点是,它利用了jQuery和CSS3能够实现非常多种弹出窗体动画效果,挺酷的.
    					</li>
    				</ul>
    				<button class="md-close">
    					关闭!
    				</button>
    			</div>
    		</div>
      </div>
      <div class="container">
      <button class="md-trigger" data-modal="modal-1">淡入</button>
      <button class="md-trigger" data-modal="modal-2">从右滑动</button>
      <button class="md-trigger" data-modal="modal-3">报纸</button>
      </div>
      </br>
      </br>
      </br>
      <div>所有效果演示请參考:<a target="_blank" href="http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html">
          http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html</a>  </div>
      </body>
      <script src="index.js" type="text/javascript"></script>
    </html>
    

    然后将style.css、index.js和index.html放在同一路径下 用chrome或Firefox打开index.html就可以

    不支持IE浏览器

    style.css index.js下载地址http://download.csdn.net/detail/itmyhome/7433847

    參考:http://www.html5tricks.com/category/jquery-plugin

    所有效果演示:http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html




  • 相关阅读:
    LeetCode 258 Add Digits
    LeetCode 231 Power of Two
    LeetCode 28 Implement strStr()
    LeetCode 26 Remove Duplicates from Sorted Array
    LeetCode 21 Merge Two Sorted Lists
    LeetCode 20 Valid Parentheses
    图形处理函数库 ImageTTFBBox
    php一些函数
    func_get_arg(),func_get_args()和func_num_args()的用法
    人生不是故事,人生是世故,摸爬滚打才不会辜负功名尘土
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5347486.html
Copyright © 2011-2022 走看看