zoukankan      html  css  js  c++  java
  • jQuery对话框右上角带关闭×


    jQuery弹出可关闭遮罩层:http://hovertree.com/texiao/layer/1/

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>jQuery对话框右上角带关闭× - 何问起</title><base target="_blank" />
    <!-- Attach our CSS -->
    <link rel="stylesheet" href="http://hovertree.com/texiao/layer/1/reveal.css">
    <!-- Attach necessary scripts -->
    <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://hovertree.com/texiao/layer/1/jquery.reveal.js"></script>
    <style type="text/css">
    body {
    font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif;
    }
    
    .big-link {
    display: block;
    margin-top: 50px;
    text-align: center;
    font-size: 30px;
    background-color:#eeeeee;
    color: #06f;
    }
    .hovertreeinfo{text-align:center;} .hovertreeinfo a{color:darkcyan;}
    </style>
    
    </head>
    <body>
    <div class="hovertreeinfo">
    <h1>jQuery弹出可关闭层提示框</h1>
    </div>
    <a href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="big-link" data-reveal-id="myModal">
    Demo 1
    </a>
    
    <a href="http://hovertree.com/hvtart/bjae/lhnydfey.htm" class="big-link" data-reveal-id="myModal" data-animation="fade">
    Demo 2
    </a>
    
    <a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm" class="big-link" data-reveal-id="myModal" data-animation="none">
    Demo 3
    </a>
    
    <div id="myModal" class="reveal-modal">
    <h1>jquery导出层</h1>
    <p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.
    推荐使用Demo 1,和Demo 3两种方式。何问起 hovertree.com
    </p>
    <a class="close-reveal-modal">&#215;</a>
    </div>
    
    <div class="hovertreeinfo">推荐使用Demo 1,和Demo 3两种方式.
    <br />
    <a href="http://hovertree.com/h/bjaf/tishiceng.htm">原文</a> <a href="http://hovertree.com">首页</a>
    <a href="http://hovertree.com/texiao/">特效</a>
    <br />by 何问起
    hovertree.com
    <br />
    <!--<img src="http://hovertree.com/texiao/layer/1/modal-gloss.png" />-->
    </div>
    </body>
    </html>

    转自:http://hovertree.com/h/bjaf/tishiceng.htm

    特效库:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    HBase 超详细介绍
    写在之前
    【CF】38E Let's Go Rolling! (dp)
    [CF] E. Camels
    CF9D How many trees? (dp)
    [CF] 8C Looking for Order
    CF dp 题(1500-2000难度)
    NOIP原题板刷
    Codeforces Round #595 (Div. 3) 题解
    CSP-S2019 停课日记
  • 原文地址:https://www.cnblogs.com/roucheng/p/jqtishi.html
Copyright © 2011-2022 走看看