SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發展強大的接口。是一個模態對話框的框架。 SimpleModal使您可以靈活地構建任何你可以設想，而屏蔽相關的跨瀏覽器問題。
（0）寫在前面
jquery、simpleModal、瀏覽器這三者的兼容性,不僅顯示在報錯上，還體現在所呈現的效果不是預期上。
說一下我的環境
jquery-1.8.3.js
jquery.simplemodal.js 1.4.4
chrome49
去官網下載simpleModal，可以省去很多麻煩，比如名子一樣但內容不一樣，說多了都是淚啊
（1）快速入手
導入順序
<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>很好,你可以繼續看下去了</p><button type="button" class="simplemodal-close">關 閉</button></div> <br> <script><br> $(function() <br> {<br> $('#lol').modal(); <br> });<br> </script></body> 如果你看到lol元素在瀏覽器視口的位置是,左右居中，上下居中，點擊關閉按鈕隱藏，瀏覽器沒報錯，可以繼續了。
（1）詳細介紹
繼續以往的觀點，這里不是JQuery官網
說一些比較常見的，新鮮的東西，了解這些，你就可以完成大部分工作，并知道怎么找到自己不知道的
有興趣的的小伙伴可以通過debug查看元素信息
(a) $.modal
$.modal("<div>123</div>"); 自己看效果
(b)傳遞參數
可以這樣使用
$('#lol').modal({<br>})對象里可以放入以下參數，單不限于以下參數
position: ['0']
數組里可以放入兩個參數，指定top，left的值(不是lol的)
只有一個時，指定top
overlayId: 'osx-overlay',
opacity: 75,
overlayClose: true,
overlayId: 'osx-overlay' 指定simpleModal框架自動創建的div的id名，你將獲得控制權，注意，你需要手動的加上這個樣式，最好在給他指定一個非白色的背景色
opacity: 75 osx-overlay所代表元素顯示時，內容的透明度
overlayClose: true osx-overlay所代表元素被點擊時，是否回到上一個狀態，看到的現象是lol所代表的元素不可見了。
onOpen:
onClose:
兩個屬性可以綁定函數，覆蓋默認的顯示、關閉函數
（c）不顯示
sampleModal會為含有類為simplemodal-close的元素自動綁定關閉行為，列如
<button type="button" class="simplemodal-close">關 閉</button>
（2）綜合練習
style樣式
<style type="text/css">#osx-overlay{background-color:black;}</style>body區域(含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插件的使用介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
