JQuery是一個(gè)快速、小巧、功能強(qiáng)大的 JavaScript 庫,使 HTML 頁面與 JavaScript 之間的簡潔的交互變得輕松愉悅。
而模態(tài)窗口是現(xiàn)在很多網(wǎng)頁都使用的一種交互方式,但是有時(shí)候窗口大小不太合適,這時(shí)候我們可以利用JQuery來動態(tài)調(diào)整模態(tài)窗口大小。
下面是一個(gè)簡單的例子:
<!--html代碼--> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>這是一個(gè)模態(tài)窗口。</p> </div> </div>
//JQuery代碼 $(document).ready(function(){ //獲取模態(tài)窗口元素 var modal = document.getElementById("myModal"); //獲取關(guān)聯(lián)關(guān)閉按鈕元素 var span = document.getElementsByClassName("close")[0]; //當(dāng)用戶點(diǎn)擊關(guān)閉按鈕時(shí),關(guān)閉模態(tài)窗口 span.onclick = function() { modal.style.display = "none"; } //當(dāng)用戶點(diǎn)擊模態(tài)窗口外部時(shí),關(guān)閉模態(tài)窗口 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } //調(diào)整模態(tài)窗口大小 $(".modal-content").css("width","50%"); });
在JQuery代碼中,我們首先獲取到模態(tài)窗口元素,然后獲取到關(guān)聯(lián)的關(guān)閉按鈕元素,通過點(diǎn)擊事件關(guān)閉模態(tài)窗口。
接下來,通過獲取模態(tài)窗口中內(nèi)容的類名來獲取模態(tài)窗口內(nèi)容的元素,然后將其寬度設(shè)置為50%。
這樣我們就可以輕松地調(diào)整模態(tài)窗口大小了。
上一篇css怎么改動畫
下一篇jquery貪吃蛇事件