快捷導(dǎo)航

Bootstrap編寫一個在當(dāng)前網(wǎng)頁彈出可關(guān)閉的對話框非彈窗

更新時間：2016年06月30日 16:42:03 作者：yongh701

這篇文章主要介紹了Bootstrap編寫一個在當(dāng)前網(wǎng)頁彈出可關(guān)閉的對話框，不用跳轉(zhuǎn)，非彈窗，感興趣的小伙伴們可以參考一下

使用彈窗在網(wǎng)頁中顯示短信息還行，雖然不那么地友好。然而，彈窗對于如同網(wǎng)站服務(wù)條款的長信息就無能為力的了。這是需要使用一個叫模態(tài)框modal的東西，并且在模態(tài)框里面嵌入一個多行文本框textarea。
這個東西，如果要手工寫JavaScript代碼就太難做了，但是使用Bootstrap來編寫就簡單起來。

一、基本目標(biāo)

有一個網(wǎng)頁，網(wǎng)頁上面有一個超級鏈接，一個按鈕：

點(diǎn)擊他們都會打開一個如下所示的模態(tài)框，這個模態(tài)框，點(diǎn)擊右上角的X按鈕與下方的確定都會關(guān)閉。

二、制作過程

1.因?yàn)樾枰褂肂ootstrap，所以先在官網(wǎng)（點(diǎn)擊打開鏈接）下載組件即可，用于生產(chǎn)環(huán)境的Bootstrap版本（點(diǎn)擊打開鏈接），Bootstrap3對2并不兼容，建議直接根據(jù)其開發(fā)文檔使用Bootstrap3。本文也是根據(jù)Bootstrap3制作。同時，Bootstrap3所提供的JavaScript效果需要到j(luò)Query1.11（點(diǎn)擊打開鏈接）支持，可以到j(luò)Query官網(wǎng)中下載兼容舊瀏覽器IE6的jQuery1.11（點(diǎn)擊打開鏈接），而不是不兼容舊瀏覽器IE6的jQuery2。下載完之后，配置好站點(diǎn)目錄。把Bootstrap3直接解壓到站點(diǎn)目錄，而把jquery-1.11.1.js放到j(luò)s目錄，也就是與bootstrap.js同一目錄，站點(diǎn)文件夾的結(jié)構(gòu)大致如下：

2.本網(wǎng)頁編碼如下，下面一個片段一個片段進(jìn)行分析：

<!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>模態(tài)框</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">服務(wù)協(xié)議</a>
 </p>
 <p>
 <button type="button" class="btn btn-danger" data-toggle="modal"
 data-target="#myModal">
 點(diǎn)擊此閱讀服務(wù)協(xié)議
 </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">
 服務(wù)協(xié)議
 </h4>
 </div>
 <div class="modal-body">
 <p align="center">
 <textarea class="form-control" rows=3 readonly="true" />
 本協(xié)議服務(wù)條款具有法律效力。 
    本協(xié)議服務(wù)條款具有法律效力。 
    本協(xié)議服務(wù)條款具有法律效力。 
    本協(xié)議服務(wù)條款具有法律效力。
 </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>模態(tài)框</title>
 <!--要求本網(wǎng)頁自動適應(yīng)PC、平板、手機(jī)等設(shè)備的屏幕-->
 <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>

（2）最初在網(wǎng)頁所呈現(xiàn)的鏈接與按鈕

 <p>
  <!--data-toggle="modal" data-target="#myModal"要求打開的myModal的模態(tài)框-->
 <a data-toggle="modal" data-target="#myModal">服務(wù)協(xié)議</a>
 </p>
 <p>
  <!--class="btn btn-danger"是按鈕在Bootstrap的樣式。-->
 <button type="button" class="btn btn-danger" data-toggle="modal"
 data-target="#myModal">
 點(diǎn)擊此閱讀服務(wù)協(xié)議
 </button>
 </p>

（3）模態(tài)框部分

模態(tài)框的基本如下：

因此也就有了如下代碼：

<!--class="modal fade"是要求模態(tài)框以動畫效果fade打開，class="modal"也行，但打開得十分唐突。id="myModal"與上面的超級鏈接、按鈕相呼應(yīng)-->
 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">
  <!--必須在modal-content之后才能進(jìn)行模態(tài)框的布局。-->
 <div class="modal-content">
 <div class="modal-header">
   <!--這是模態(tài)框的標(biāo)題部分， &times加分號 為×的轉(zhuǎn)移字符，實(shí)質(zhì)是一個關(guān)閉按鈕-->
 <button type="button" class="close" data-dismiss="modal">
 <span>×</span>
 </button>
   <!--這是模態(tài)框的標(biāo)題-->
 <h4 class="modal-title" id="myModalLabel">
 服務(wù)協(xié)議
 </h4>
 </div>
 <div class="modal-body">
   <!--這是模態(tài)框的主體部分，內(nèi)嵌一個行數(shù)為3的只讀文本框，文本框在模態(tài)框主體部分居中，不用文本框也可以，但內(nèi)容會一次性呈現(xiàn)給用戶，那還不如直接彈窗算了？-->
 <p align="center">
 <textarea class="form-control" rows=3 readonly="true" />
 本協(xié)議服務(wù)條款具有法律效力。 
    本協(xié)議服務(wù)條款具有法律效力。 
    本協(xié)議服務(wù)條款具有法律效力。 
    本協(xié)議服務(wù)條款具有法律效力。
 </textarea>
 </p>
 </div>
 <div class="modal-footer">
   <!--這是模態(tài)框的尾部，就放一個居中的確定按鈕-->
 <p align="center">
 <button type="button" class="btn btn-default"
 data-dismiss="modal">
 確定
 </button>
 </p>
 </div>
 </div>
 </div>
 </div>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: