Bootstrap實(shí)現(xiàn)帶動(dòng)畫過渡的彈出框
更新時(shí)間：2016年08月09日 15:13:26 作者：smartbetter
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)帶動(dòng)畫過渡的彈出框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
先看看效果圖：
代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>帶動(dòng)畫過的渡彈出框</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">×</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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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è)精彩的專題：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
- Bootstrap彈出框之自定義懸?？驑?biāo)題、內(nèi)容和樣式示例代碼
- Bootstrap的popover（彈出框）2秒后定時(shí)消失的實(shí)現(xiàn)代碼
- 擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框
- Bootstrap實(shí)現(xiàn)提示框和彈出框效果
- Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁彈出可關(guān)閉的對(duì)話框 非彈窗
- Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解
- 關(guān)于Bootstrap彈出框無法調(diào)用問題的解決辦法
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- bootstrap實(shí)現(xiàn)點(diǎn)擊刪除按鈕彈出確認(rèn)框的實(shí)例代碼
相關(guān)文章
類型檢查是一種靜態(tài)分析的過程，用于驗(yàn)證變量、函數(shù)和表達(dá)式的類型是否符合預(yù)期，這篇文章主要來和大家聊聊TypeScript中類型檢查與錯(cuò)誤捕獲的相關(guān)知識(shí)，希望對(duì)大家有所幫助2023-06-06
JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開發(fā)的時(shí)候,很多人多多少少都會(huì)被this的指向問題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過實(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可編輯的常見方法
用javascript實(shí)現(xiàn)div可編輯的常見方法...2007-10-10
參數(shù)name需要遵循規(guī)范RFC2109，也就是說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ù)性工作帶來的負(fù)擔(dān)2015-08-08
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒有indexOf()方法，可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05
JS實(shí)現(xiàn)數(shù)組過濾從簡(jiǎn)單到多條件篩選
一般情況下的單條件篩選，數(shù)組的filter方法就能夠滿足需求，本文討論的重點(diǎn)是多條件下的復(fù)合篩選，并列出了幾個(gè)相關(guān)知識(shí)點(diǎn)，感興趣的可以了解一下2021-07-07
用js來生成隨機(jī)彩票號(hào)碼清單...2007-02-02