JQuery Modal是一個輕量級的彈窗插件,它能夠在頁面上顯示自定義的對話框或模態框。它基于JQuery開發,使用起來非常方便。
要使用JQuery Modal,在HTML中引入jquery和jquery.modal.js文件,例如:
<script src="jquery.js"></script> <script src="jquery.modal.js"></script>
接著,在頁面上定義一個隱藏的對話框或模態框,例如:
<div id="myModal" style="display:none;"> <h2>My Modal</h2> <p>This is my modal content.</p> </div>
然后,通過JQuery代碼來顯示該對話框或模態框,例如:
$('#myModal').modal();
當然,JQuery Modal還有許多自定義的選項,例如對話框的寬度、高度、標題、按鈕等等,可以通過參數來設置,例如:
$('#myModal').modal({ width: 500, height: 300, title: 'Modal Title', closeButton: true, buttons: { 'Ok': function () { //do something $('#myModal').modal('hide'); }, 'Cancel': function () { $('#myModal').modal('hide'); } } });
上面的代碼會顯示一個寬度為500px,高度為300px,帶有標題和關閉按鈕的模態框,并且有“Ok”和“Cancel”兩個按鈕,點擊這些按鈕會執行相應的函數,并關閉模態框。
JQuery Modal具有可擴展性,如果你需要更復雜的功能,可以通過編寫JQuery插件來實現。
下一篇滾動按鈕css