PHP編程文件處理類SplFileObject和SplFileInfo用法實例分析
804
2023-12-08
SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強大的接口。是一個模態(tài)對話框的框架。 SimpleModal使您可以靈活地構建任何你可以設想，而屏蔽相關的跨瀏覽器問題。
（0）寫在前面
jquery、simpleModal、瀏覽器這三者的兼容性,不僅顯示在報錯上，還體現(xiàn)在所呈現(xiàn)的效果不是預期上。
說一下我的環(huán)境
jquery-1.8.3.js
jquery.simplemodal.js 1.4.4
chrome49
去官網(wǎng)下載simpleModal，可以省去很多麻煩，比如名子一樣但內(nèi)容不一樣，說多了都是淚啊
（1）快速入手
導入順序
<script type="text/javascript" src="http://www.gimoo.net/t/1812/jquery-1.8.3.js" ></script> <script type="text/javascript" src="http://www.gimoo.net/t/1812/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">關 閉</button>
</div> <br> <script><br> $(function() <br> {<br> $('#lol').modal(); <br> });<br> </script>
</body>
如果你看到lol元素在瀏覽器視口的位置是,左右居中，上下居中，點擊關閉按鈕隱藏，瀏覽器沒報錯，可以繼續(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名，你將獲得控制權，注意，你需要手動的加上這個樣式，最好在給他指定一個非白色的背景色
opacity: 75 osx-overlay所代表元素顯示時，內(nèi)容的透明度
overlayClose: true osx-overlay所代表元素被點擊時，是否回到上一個狀態(tài)，看到的現(xiàn)象是lol所代表的元素不可見了。
onOpen:
onClose:
兩個屬性可以綁定函數(shù)，覆蓋默認的顯示、關閉函數(shù)
（c）不顯示
sampleModal會為含有類為simplemodal-close的元素自動綁定關閉行為，列如
<button type="button" class="simplemodal-close">關 閉</button>
（2）綜合練習
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>遁地龍卷風</p>
<button type="button" class="simplemodal-close">關 閉</button>
</div>
</body>
<script>
$(function()
{
$('#lol').modal({
position: ['0'],
overlayId: 'osx-overlay',
opacity: 75,
position: ['0'],
overlayClose: true,
});
});
</script>
以上所述是小編給大家介紹的jQuery simpleModal插件的使用介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持！
