快捷導(dǎo)航

Bootstrap實(shí)現(xiàn)帶動(dòng)畫過(guò)渡的彈出框

更新時(shí)間：2016年08月09日 15:13:26 作者：smartbetter

這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)帶動(dòng)畫過(guò)渡的彈出框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先看看效果圖：

代碼：

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>帶動(dòng)畫過(guò)的渡彈出框</title>
 <link rel="stylesheet" >
 <!--css樣式-->
 <style >
  body{margin:30px;padding:30px;}
 </style>
</head>
<body>

<button class="btn btn-primary" type="button">點(diǎn)擊我</button>
<div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
     <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">彈出窗標(biāo)題</h4>
   </div>
   <div class="modal-body">
    <p>彈出窗主體內(nèi)容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 放置在文檔的結(jié)尾，使頁(yè)面加載速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
 $(function(){
  $(".btn").click(function(){
   $("#mymodal").modal("toggle");
  });
 });
</script>
</body>
</html>

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

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

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

Bootstrap插件使用教程

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

您可能感興趣的文章:

相關(guān)文章

淺析TypeScript中的類型檢查與錯(cuò)誤捕獲
類型檢查是一種靜態(tài)分析的過(guò)程，用于驗(yàn)證變量、函數(shù)和表達(dá)式的類型是否符合預(yù)期，這篇文章主要來(lái)和大家聊聊TypeScript中類型檢查與錯(cuò)誤捕獲的相關(guān)知識(shí)，希望對(duì)大家有所幫助
2023-06-06
JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開(kāi)發(fā)的時(shí)候,很多人多多少少都會(huì)被this的指向問(wèn)題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用，他可以返回請(qǐng)求的數(shù)據(jù)，然后利用客戶端的js進(jìn)行解析，這一點(diǎn)體現(xiàn)出js的強(qiáng)大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
用javascript實(shí)現(xiàn)div可編輯的常見(jiàn)方法
用javascript實(shí)現(xiàn)div可編輯的常見(jiàn)方法...
2007-10-10
不要在cookie中使用特殊字符的原因分析
參數(shù)name需要遵循規(guī)范RFC2109，也就是說(shuō)name參數(shù)只能包含字母或者數(shù)字，不能包含逗號(hào)、分號(hào)、空格及美元符號(hào)。cookie的name屬性設(shè)置之后不能被修改。
2010-07-07
基于javascript實(shí)現(xiàn)動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間
這篇文章主要介紹了基于javascript實(shí)現(xiàn)動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間，以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間的實(shí)現(xiàn)技巧，需要的朋友可以參考下
2016-01-01
Grunt入門教程(自動(dòng)任務(wù)運(yùn)行器)
Grunt是一個(gè)自動(dòng)任務(wù)運(yùn)行器，會(huì)按照預(yù)先設(shè)定的順序自動(dòng)運(yùn)行一系列的任務(wù)。這可以簡(jiǎn)化工作流程，減輕重復(fù)性工作帶來(lái)的負(fù)擔(dān)
2015-08-08
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒(méi)有indexOf()方法，可通過(guò)下面的代碼擴(kuò)展,需要的朋友可以參考下
2014-05-05
JS實(shí)現(xiàn)數(shù)組過(guò)濾從簡(jiǎn)單到多條件篩選
一般情況下的單條件篩選，數(shù)組的filter方法就能夠滿足需求，本文討論的重點(diǎn)是多條件下的復(fù)合篩選，并列出了幾個(gè)相關(guān)知識(shí)點(diǎn)，感興趣的可以了解一下
2021-07-07
用js來(lái)生成隨機(jī)彩票號(hào)碼清單
用js來(lái)生成隨機(jī)彩票號(hào)碼清單...
2007-02-02