jQuery simpleModal插件的使用介紹

更新時間：2016年08月30日 16:50:34 作者：遁地龍卷風(fēng)

SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯，具有參考借鑒價值，對jquery simplemodal相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強大的接口。是一個模態(tài)對話框的框架。 SimpleModal使您可以靈活地構(gòu)建任何你可以設(shè)想，而屏蔽相關(guān)的跨瀏覽器問題。

（0）寫在前面

jquery、simpleModal、瀏覽器這三者的兼容性,不僅顯示在報錯上，還體現(xiàn)在所呈現(xiàn)的效果不是預(yù)期上。

說一下我的環(huán)境

jquery-1.8.3.js

jquery.simplemodal.js 1.4.4

chrome49

去官網(wǎng)下載simpleModal，可以省去很多麻煩，比如名子一樣但內(nèi)容不一樣，說多了都是淚啊

（1）快速入手

導(dǎo)入順序

<script type="text/javascript" src="jquery-1.8.3.js" ></script>
<script type="text/javascript" src="jquery.simplemodal.js" ></script>

將下列代碼黏貼到你的html文件

<body>
<div id="lol" style="border:1px solid red;display:none">
<p>很好,你可以繼續(xù)看下去了</p>
<button type="button" class="simplemodal-close">關(guān) 閉</button>
</div> <br> <script><br>　　$(function() <br>　　{<br>　　　　$('#lol').modal(); <br>　　});<br>　</script>
</body>

　如果你看到lol元素在瀏覽器視口的位置是,左右居中，上下居中，點擊關(guān)閉按鈕隱藏，瀏覽器沒報錯，可以繼續(xù)了。

（1）詳細介紹

繼續(xù)以往的觀點，這里不是JQuery官網(wǎng)

說一些比較常見的，新鮮的東西，了解這些，你就可以完成大部分工作，并知道怎么找到自己不知道的

有興趣的的小伙伴可以通過debug查看元素信息

(a) $.modal

$.modal("<div>123</div>");

自己看效果

(b)傳遞參數(shù)

可以這樣使用

$('#lol').modal({<br>})

對象里可以放入以下參數(shù)，單不限于以下參數(shù)

position: ['0']

數(shù)組里可以放入兩個參數(shù)，指定top，left的值(不是lol的)

只有一個時，指定top

overlayId: 'osx-overlay',
opacity: 75,
overlayClose: true,

overlayId: 'osx-overlay' 指定simpleModal框架自動創(chuàng)建的div的id名，你將獲得控制權(quán)，注意，你需要手動的加上這個樣式，最好在給他指定一個非白色的背景色

opacity: 75 osx-overlay所代表元素顯示時，內(nèi)容的透明度

overlayClose: true osx-overlay所代表元素被點擊時，是否回到上一個狀態(tài)，看到的現(xiàn)象是lol所代表的元素不可見了。

onOpen:
onClose:

兩個屬性可以綁定函數(shù)，覆蓋默認的顯示、關(guān)閉函數(shù)

（c）不顯示

sampleModal會為含有類為simplemodal-close的元素自動綁定關(guān)閉行為，列如

<button type="button" class="simplemodal-close">關(guān) 閉</button>

（2）綜合練習(xí)

style樣式

<style type="text/css">
#osx-overlay
{
background-color:black;
}
</style>

body區(qū)域(含js)

<body>
<div id="lol" style="border:1px solid red;display:none">
<p>遁地龍卷風(fēng)</p>
<button type="button" class="simplemodal-close">關(guān) 閉</button>
</div> 
</body>
<script>
$(function() 
{
$('#lol').modal({
position: ['0'],
overlayId: 'osx-overlay',
opacity: 75, 
position: ['0'],
overlayClose: true,
}); 
});
</script>

以上所述是小編給大家介紹的jQuery simpleModal插件的使用介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！