jQuery.reveal彈出層使用

時間 2019-11-17

標籤 jquery.reveal jquery reveal 彈出使用欄目 JQuery 简体版

原文原文鏈接

最近用到彈出層，還得自定義UI，本來用的artDialog太龐大，不合適了，因而就找到了這個東西，又小又好用，基礎的彈出遮罩都有了，想要什麼還不是Coder本身說了算。javascript

這個插件是基於Jquery實現的，很是小，插件自己只有3K多一點，用起來也算簡單明瞭。css

廢話不說了。上Demohtml

首先是引用部分：java

Html->head：jquery

<head>
        <meta charset="utf-8" />
        <title>Reveal Demo</title>    
          <link rel="stylesheet" href="reveal.css">    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="jquery.reveal.js"></script>
        <style type="text/css">
            body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
            .big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
        </style>
    </head>

頭部全部引用除了jquery都是插件用到的東西，一個css文件，一個js文件，js文件就是插件本體，css是一個預設好的樣式，用起來很方便，若是須要能夠自行修改。下面的style標籤裏寫的是我本身用到的基本樣式，無他。學習

Html->body：動畫

<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
    Fade
</a>
<div id="myModal" class="reveal-modal">
    <h1>test</h1>
    <a class="close-reveal-modal">&#215;</a>
</div>

這個a標籤是用來顯示彈出層的，div就是要彈出的層，層裏面須要什麼東西，長成什麼樣子就看我的的需求了。spa

其中：插件

　　1.a標籤中的data-reveal-id屬性的值必需要與須要彈出的層的id對應，這裏只能使用id，使用其餘定位符就很差用了。code

　　2.a標籤中的data-animation屬性設置的是彈出方式，有三種屬性能夠選，fade, fadeAndPop, none，分別對應不一樣的動畫效果，固然最後一個實參none就是沒有動畫效果了，通常推薦使用fade，其餘的各位能夠嘗試下，大同小異，看我的喜愛，通過與UED人員討論，結果是三種方式對於用戶體驗的影響不大，這裏就仁者見仁智者見智了。

　　三、div標籤中的id屬性必需要設置，並與a標籤中的data-reveal-id屬性對應，這是一個基於Jquery的選擇器方式，這裏再也不贅述這個問題了，不明白選擇器的能夠自行百度w3c School裏去學習。

　　4.<a class="close-reveal-modal">×</a>這一行代碼是預設好的樣式，在彈出層右上角會有一個關閉按鈕，並已經寫好了關閉彈出層的關閉事件，相信通常你們都是須要的吧，固然也能夠自定義。

JS插件本體沒什麼好說的，實際上就是基於Jquery的一系列操做和方法，方式仍是拼裝html這種很原始的方式，因此兼容性方面不用考慮不少。這裏只把常常須要設置的東西列出來。

var defaults = {  
            animation: 'fade', //可選模式爲三種：fade, fadeAndPop, none
            animationspeed: 300, //動畫效果速度
            closeonbackgroundclick: true, //設置點擊模態化背景時是否關閉彈出層
            dismissmodalclass: 'close-reveal-modal' //設置關閉關閉的樣式
        };

代碼註釋都在，不須要解釋了。

其餘的東西常規狀況下都不須要變更，根據我的狀況而定吧。這個插件使用很是簡單，想來想去都不必再弄個演示啥的，若是哪位朋友真須要的話直接聯繫我給你發吧。

插件自己有很強的自定義性，樣式，表現方式均可以本身定義，小弟由於css功力實在是見不得人，這裏就不獻醜了，各位本身作樣式吧。

插件的js和css文件在個人空間裏都有，名稱分別爲：jquery.reveal.js和reveal.css，你們須要的話自行下載或者聯繫我直接發給你，本人比較懶，沒有隨手作壓縮包的習慣，各位輕噴。