給button按鈕添加彈出窗口，最簡(jiǎn)單的方法就是給按鈕綁定一個(gè)javascript事件，代碼如下：

<a href = "javascript:alert('此為會(huì)員建站課程，請(qǐng)聯(lián)系客服');">按鈕</a>

這種彈出窗口會(huì)顯示windows默認(rèn)的彈窗，不是很美觀，并且無(wú)法給它添加超鏈接。

今天要給廣大學(xué)建網(wǎng)站學(xué)員介紹的這種彈出窗口，是一種DIV層彈窗，我們可以在DIV層中寫上任何自己需要的代碼。效果如下：

如何去給button按鈕添加這樣的彈出窗口呢？

首先我們來(lái)分析一下，制作這樣的彈窗，需要二樣?xùn)|西：一個(gè)是按鈕，一個(gè)是彈出窗口層；

第一步：制作一個(gè)按鈕。按鈕就用一個(gè)基本的button。代碼：

<button type="button" id="crawle" class="button button-primary button-small btnjs">立即學(xué)習(xí)&gt;&gt;</button>

第二步：制作一個(gè)彈出窗口DIV層。代碼：

<div class="dialog">

        <h3>提示：</h3>

        <p>本資源為<span>VIP會(huì)員資源</span>，如需使用請(qǐng)登錄或購(gòu)買VIP會(huì)員！<br/><br/>

        <a href="dl" type="button" class="btn btn-primary">會(huì)員登錄</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <a href="reg" type="button" class="btn btn-primary">注冊(cè)會(huì)員</a>        

        </p>        

        </div>

第三步：為了讓DIV彈出窗口更美觀，我們要給彈出窗口DIV層設(shè)置一下樣式。代碼：

.dialog{    width: 500px;

?   height: 200px;

?   border: solid 1px #b5b0b0;

?   border-radius: 5px;

?   position: absolute;

?   left: 30%;

?   bottom: 30%;

?   background: #eee;

?   line-height: 40px;

?   text-align: center;

?   display: none;

    font-size:16px;

}

第四步：給button按鈕添加添加點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊button按鈕時(shí)，顯示彈出窗口層。代碼：

//引入jquery

<script src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/js/jquery-3.3.1.min.js"></script>



//給按鈕添加點(diǎn)擊顯示事件

<script>

$(".btnjs").click(function(){

$(".dialog").show(200)

})

</script>

到此，我們就在自己做網(wǎng)站時(shí)，給自己的網(wǎng)頁(yè)上成功添加了一個(gè)button按鈕點(diǎn)擊彈出窗口，彈出窗口里面的內(nèi)容可以根據(jù)自己網(wǎng)站的要求來(lái)修改。

標(biāo)簽： isp 代碼 建網(wǎng)站 建站 學(xué)建網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。