欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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">&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é)尾，使頁面加載速度更快 -->
<!-- 如果要使用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)文章

  • 使用uni-app打包H5的圖文教程

    使用uni-app打包H5的圖文教程

    uni-app是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS，Android,H5,以及各種小程序（微信/支付寶/百度/頭條/?QQ?/釘釘）等多個(gè)平臺(tái),這篇文章主要給大家介紹了關(guān)于使用uni-app打包H5的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • JavaScript變量類型以及變量作用域詳解

    JavaScript變量類型以及變量作用域詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript變量類型以及變量作用域的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • javaScript實(shí)現(xiàn)浮點(diǎn)數(shù)轉(zhuǎn)十六進(jìn)制字符

    javaScript實(shí)現(xiàn)浮點(diǎn)數(shù)轉(zhuǎn)十六進(jìn)制字符

    浮點(diǎn)數(shù)轉(zhuǎn)十六進(jìn)制的方法有很多，在本文將為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
    2013-10-10
  • javascript笛卡爾積算法實(shí)現(xiàn)方法

    javascript笛卡爾積算法實(shí)現(xiàn)方法

    這篇文章主要介紹了javascript笛卡爾積算法實(shí)現(xiàn)方法,實(shí)例分析了笛卡爾積算法的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-04-04
  • 原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼

    原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼

    下面小編就為大家?guī)硪黄鷍s三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • 詳解webpack進(jìn)階之loader篇

    詳解webpack進(jìn)階之loader篇

    本篇文章主要介紹了詳解webpack進(jìn)階之loader篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08
  • Javascript將JSON日期格式化

    Javascript將JSON日期格式化

    在做項(xiàng)目中，將實(shí)體轉(zhuǎn)化為JSON后，結(jié)果后臺(tái)返回json時(shí)間格式為/Date(1306418993027)/，在前臺(tái)JS里顯示的并不是真正的日期，而且我們不能把所有日期字段都變成string吧，因此寫了Javascript的擴(kuò)展方法，來實(shí)現(xiàn)這個(gè)功能，代碼如下
    2016-08-08
  • js加載讀取內(nèi)容及顯示與隱藏div示例

    js加載讀取內(nèi)容及顯示與隱藏div示例

    這篇文章主要介紹了js加載讀取內(nèi)容及顯示與隱藏div的方法,需要的朋友可以參考下
    2014-02-02
  • 微信小程序?qū)崿F(xiàn)頂部下拉菜單欄

    微信小程序?qū)崿F(xiàn)頂部下拉菜單欄

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部下拉菜單欄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-11-11
  • JavaScript三種綁定事件方式及相互之間的區(qū)別分析

    JavaScript三種綁定事件方式及相互之間的區(qū)別分析

    這篇文章主要介紹了JavaScript三種綁定事件方式及相互之間的區(qū)別,結(jié)合具體實(shí)例形式分析了javascript事件綁定方式的基本實(shí)現(xiàn)方法與相互之間的區(qū)別,需要的朋友可以參考下
    2017-01-01

最新評(píng)論