【JavaScript】使用Bootstrap來編寫一個在當前網頁彈出的對話方塊，可以關閉，不用跳轉，非彈窗，bootstrap彈窗
使用彈窗在網頁中顯示簡訊息還行，雖然不那麼地友好。然而，彈窗對於如同網站服務條款的長資訊就無能為力的了。這是需要使用一個叫模態框modal的東西，並且在模態框裡面嵌入一個多行文字框textarea。
這個東西，如果要手工寫JavaScript代碼就太難做了，但是使用Bootstrap來編寫就簡單起來。
一、基本目標
有一個網頁，網頁上面有一個超級連結，一個按鈕：
點擊他們都會開啟一個如下所示的模態框，這個模態框，點擊右上方的X按鈕與下方的確定都會關閉。
二、製作過程
1.因為需要使用Bootstrap，所以先在官網（點擊開啟連結）下載組件即可，用於生產環境的Bootstrap版本（點擊開啟連結），Bootstrap3對2並不相容，建議直接根據其開發文檔使用Bootstrap3。本文也是根據Bootstrap3製作。同時，Bootstrap3所提供的JavaScript效果需要到jQuery1.11（點擊開啟連結）支援，可以到jQuery官網中下載相容舊瀏覽器IE6的jQuery1.11（點擊開啟連結），而不是不相容舊瀏覽器IE6的jQuery2。下載完之後，配置好網站目錄。把Bootstrap3直接解壓到網站目錄，而把jquery-1.11.1.js放到js目錄，也就是與bootstrap.js同一目錄，網站資料夾的結構大致如下：
2.本網頁編碼如下，下面一個片段一個片段進行分析：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>模態框</title><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><link href="css/bootstrap.css" rel="stylesheet" media="screen"><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="js/bootstrap.js"></script></head><body><p><a data-toggle="modal" data-target="#myModal">服務合約</a></p><p><button type="button" class="btn btn-danger" data-toggle="modal"data-target="#myModal">點擊此閱讀服務合約</button></p><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title" id="myModalLabel">服務合約</h4></div><div class="modal-body"><p align="center"><textarea class="form-control" rows=3 readonly="true" />本協議服務條款具有法律效力。 本協議服務條款具有法律效力。 本協議服務條款具有法律效力。 本協議服務條款具有法律效力。</textarea></p></div><div class="modal-footer"><p align="center"><button type="button" class="btn btn-default"data-dismiss="modal">確定</button></p></div></div></div></div></body></html>
（1）<head>部分
<head> <!--頁面編碼--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>模態框</title> <!--要求本網頁自動適應PC、平板、手機等裝置的螢幕--><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--本例需要三個外部外掛程式所支援--><link href="css/bootstrap.css" rel="stylesheet" media="screen"><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="js/bootstrap.js"></script></head>
<p> <!--data-toggle="modal" data-target="#myModal"要求開啟的myModal的模態框--><a data-toggle="modal" data-target="#myModal">服務合約</a></p><p> <!--class="btn btn-danger"是按鈕在Bootstrap的樣式。--><button type="button" class="btn btn-danger" data-toggle="modal"data-target="#myModal">點擊此閱讀服務合約</button></p>
模態框的基本如下：
因此也就有了如下代碼：
<!--class="modal fade"是要求模態框以動畫效果fade開啟，class="modal"也行，但開啟得十分唐突。id="myModal"與上面的超級連結、按鈕相呼應--><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"> <!--必須在modal-content之後才能進行模態框的布局。--><div class="modal-content"><div class="modal-header"> <!--這是模態框的標題部分， ×加分號 為×的轉移字元，實質是一個關閉按鈕--><button type="button" class="close" data-dismiss="modal"><span>×</span></button> <!--這是模態框的標題--><h4 class="modal-title" id="myModalLabel">服務合約</h4></div><div class="modal-body"> <!--這是模態框的主體部分，內嵌一個行數為3的唯讀文字框，文字框在模態框主體部分置中，不用文字框也可以，但內容會一次性呈現給使用者，那還不如直接彈窗算了？--><p align="center"><textarea class="form-control" rows=3 readonly="true" />本協議服務條款具有法律效力。 本協議服務條款具有法律效力。 本協議服務條款具有法律效力。 本協議服務條款具有法律效力。</textarea></p></div><div class="modal-footer"> <!--這是模態框的尾部，就放一個置中的確定按鈕--><p align="center"><button type="button" class="btn btn-default"data-dismiss="modal">確定</button></p></div></div></div></div>
<script type="text/javascript">
alert("歡迎進入");
</script>
JavaScript中，怎讓頁面彈出一個對話方塊，上面有讀秒，讀秒結束後，改對話方塊自動關閉新手
<p>網頁倒計時程式碼1<br><script language="javascript"><br>var cTime=10;//這個變數是倒計時的秒數設定為10就是10秒<br>function TimeClose()<br>{<br> window.setTimeout('TimeClose()',1000);//讓程式每秒重複執行當前函數。<br> if(cTime<=0)//判斷秒數如果為0<br> CloseWindow_Click();//執行關閉網頁的操作<br> this.ShowTime.innerHTML="倒計時"+cTime+"秒後關閉當前視窗";//顯示倒計時時間<br> cTime--;//減少秒數<br>}<br>function CloseWindow_Click()<br>{<br> window.close();<br>}<br></script></p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
