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">關閉</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 放置在文檔的結尾，使頁面加載速度更快 -->
<!-- 如果要使用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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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