快捷導(dǎo)航

BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能

更新時(shí)間：2017年02月15日 11:26:22 投稿：mrr

這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

說(shuō)明

通過(guò)使用一個(gè)象征關(guān)閉的圖標(biāo)，可以讓模態(tài)框和警告框消失

示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
   <title>Bootstrap 101 Template</title>
   <!-- Bootstrap -->
   <link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
  </head>
  <body>
  <div class="container">
  <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

輸出

以上所述是小編給大家介紹的BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js小數(shù)計(jì)算小數(shù)點(diǎn)后顯示多位小數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js小數(shù)計(jì)算小數(shù)點(diǎn)后顯示多位小數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
js完美的div拖拽實(shí)例代碼
文章實(shí)現(xiàn)的div拖拽程序可以根據(jù)按鈕來(lái)控制是要種拖拽方式與位置，下面希望有需要的朋友可參考
2014-01-01
JavaScript檢查彈出窗口是否被阻攔的方法技巧
這篇文章主要介紹了JavaScript檢查彈出窗口是否被阻攔的方法技巧,本文用于檢測(cè)window.open彈出的窗口是否被阻攔,需要的朋友可以參考下
2015-03-03
小程序?qū)崿F(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果的方法,涉及click事件相應(yīng)、animate方法等使用技巧,需要的朋友可以參考下
2015-01-01
JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁(yè)面實(shí)現(xiàn)代碼
這篇文章主要介紹了JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁(yè)面實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-09-09
Javascript 定時(shí)器調(diào)用傳遞參數(shù)的方法
Javascript 定時(shí)器調(diào)用傳遞參數(shù)的方法，需要的朋友可以參考下。
2009-11-11
javascript實(shí)現(xiàn)延時(shí)顯示提示框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)延時(shí)顯示提示框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
輕量級(jí) JS ToolTip提示效果
JS ToolTip提示效果，喜歡的朋友可以參考下。
2010-07-07
JavaScript實(shí)現(xiàn)節(jié)點(diǎn)的刪除與序號(hào)重建實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)節(jié)點(diǎn)的刪除與序號(hào)重建方法,涉及javascript針對(duì)頁(yè)面節(jié)點(diǎn)的刪除與遍歷技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08