1.点击按钮型

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">(本地文件)
...
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" 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>模态弹出窗主体内容</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 --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>

效果如下:

2.登入注册型

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
...
<a href="" data-toggle="modal" data-target="#login-modal">登录/注册</a>
...
<!--bootstrap弹出层-->
<div class="modal fade" id="login-modal" tabindex="-1" data-backdrop="trun">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h4>用户登录</h4> </div>
<div class="modal-body">
<p>
登入/注册界面
</p> </div>
<div class="modal-footer">
<button class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/holder.js"></script> <script type="text/javascript">
$(function(){
$('#login-modal').modal({
show: false, });
});
$('#login-modal').on('show.bs.modal',function(){
console.log('显示对话框');
})
$('#login-modal').on('shown.bs.modal',function(){
console.log('对话框已经显示了');
}) $('#login-modal').on('hide.bs.modal',function(){
console.log('隐藏对话框');
})
$('#login-modal').on('hidden.bs.modal',function(){
console.log('对话框已隐藏');
})
</script>

bootstrap学习--模态弹出框modals轮子的更多相关文章

  1. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  2. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  3. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  4. bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

    bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

  5. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  6. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  7. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  8. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  9. 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭

    网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...

随机推荐

  1. MVC项目初次发布到IIS可能会遇到的问题

    MVC4 + .NET Framework 4.5 +Windows Server 2008+ IIS7.5 + 4.0集成模式池 ,初次发布后可能会遇到404.0 或者403.14错误,加入以下代码 ...

  2. zoj 2100 Seeding

    Seeding Time Limit: 2 Seconds      Memory Limit: 65536 KB It is spring time and farmers have to plan ...

  3. 403. Frog Jump

    做完了终于可以吃饭了,万岁~ 假设从stone[i]无法跳到stone[i+1]: 可能是,他们之间的距离超过了stone[i]所能跳的最远距离,0 1 3 7, 从3怎么都调不到7: 也可能是,他们 ...

  4. git问题 next fetch will store in remotes/origin

    项目在git的下无法查找到需要的Branch

  5. linux —— shell 编程(编程语法)

    导读 本文为博文linux —— shell 编程(整体框架与基础笔记)的第4小点的拓展.(本文所有语句的测试均在 Ubuntu 16.04 LTS 上进行) 目录 再识变量 函数 条件语句 循环语句 ...

  6. android 小例之两列菜单关联

    因为项目需要,做了个简单的菜单关联,其实很简单 左侧是个listview 选中的时候刷新右侧关联数据,类似网易新闻选择订阅页面 这里需要注意的是 在点击完左侧菜单列表的时候 直接右侧刷新会不一定出来数 ...

  7. android布局之线性布局

    LinearLayout 线性布局有两种,分别是水平线性布局和垂直线性布局,LinearLayout属性中android:orientation为设置线性布局当其="vertical&quo ...

  8. PNP8550(3.3V DC蜂鸣器) - 原理图系列

    一.截图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb2Jpbl9ITEo4MA==/font/5a6L5L2T/fontsize/400/fi ...

  9. Java SE 6 新特性: HTTP 增强--转

    概述 Java 语言从诞生的那天起,就非常注重网络编程方面的应用.随着互联网应用的飞速发展,Java 的基础类库也不断地对网络相关的 API 进行加强和扩展.在 Java SE 6 当中,围绕着 HT ...

  10. iOS开发--通过MultipeerConnectivity完成蓝牙通讯

    iOS开发–通过MultipeerConnectivity完成蓝牙通讯 iOS蓝牙通讯的三种方式: GameKit.framework:iOS7之前的蓝牙通讯框架,从iOS7开始过期,但是目前已经被淘 ...