jQuery ModalCloseImg是一款非常實用的jQuery插件,它可以在模態框的右上角添加一個關閉圖標,使得用戶可以通過點擊該圖標來關閉模態框。
這個插件非常易用,只需要在模態框的HTML代碼中添加一個class為“modal-close-img”的span標簽即可。例如:
<div class="modal"> <div class="modal-content"> <span class="modal-close-img"></span> <p>模態框的內容</p> </div> </div>
然后在頁面中引入jQuery庫和ModalCloseImg插件的JS代碼:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="jquery.modalcloseimg.js"></script>
最后,在頁面加載完成之后,調用ModalCloseImg插件即可:
<script> $(function(){ $('.modal-close-img').ModalCloseImg(); }); </script>
值得注意的是,ModalCloseImg插件依賴于Font Awesome字體庫,所以在使用之前請確保已經在頁面中引入了Font Awesome的CSS文件。如果你沒有引入,默認會使用系統的close標志。
上一篇滾動廣告 css