Bootstrap實現(xiàn)帶動畫過渡的彈出框

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

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

先看看效果圖：

代碼：

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

<button class="btn btn-primary" type="button">點擊我</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">彈出窗標題</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>

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

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

您可能感興趣的文章:

相關(guān)文章

使用uni-app打包H5的圖文教程
uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS，Android,H5,以及各種小程序（微信/支付寶/百度/頭條/?QQ?/釘釘）等多個平臺,這篇文章主要給大家介紹了關(guān)于使用uni-app打包H5的相關(guān)資料,需要的朋友可以參考下
2022-11-11
JavaScript變量類型以及變量作用域詳解
這篇文章主要為大家詳細介紹了JavaScript變量類型以及變量作用域的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
javaScript實現(xiàn)浮點數(shù)轉(zhuǎn)十六進制字符
浮點數(shù)轉(zhuǎn)十六進制的方法有很多，在本文將為大家詳細介紹下js中時如何實現(xiàn)的，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助
2013-10-10
javascript笛卡爾積算法實現(xiàn)方法
這篇文章主要介紹了javascript笛卡爾積算法實現(xiàn)方法,實例分析了笛卡爾積算法的javascript實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-04-04
原生js三級聯(lián)動的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄鷍s三級聯(lián)動的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
詳解webpack進階之loader篇
本篇文章主要介紹了詳解webpack進階之loader篇，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Javascript將JSON日期格式化
在做項目中，將實體轉(zhuǎn)化為JSON后，結(jié)果后臺返回json時間格式為/Date(1306418993027)/，在前臺JS里顯示的并不是真正的日期，而且我們不能把所有日期字段都變成string吧，因此寫了Javascript的擴展方法，來實現(xiàn)這個功能，代碼如下
2016-08-08
js加載讀取內(nèi)容及顯示與隱藏div示例
這篇文章主要介紹了js加載讀取內(nèi)容及顯示與隱藏div的方法,需要的朋友可以參考下
2014-02-02
微信小程序?qū)崿F(xiàn)頂部下拉菜單欄
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頂部下拉菜單欄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
JavaScript三種綁定事件方式及相互之間的區(qū)別分析
這篇文章主要介紹了JavaScript三種綁定事件方式及相互之間的區(qū)別,結(jié)合具體實例形式分析了javascript事件綁定方式的基本實現(xiàn)方法與相互之間的區(qū)別,需要的朋友可以參考下
2017-01-01