bootstrap学习--模态弹出框modals轮子
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">×</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">×</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轮子的更多相关文章
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例
弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...
- UIPresentationController - iOS自定义模态弹出框
参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...
随机推荐
- MVC项目初次发布到IIS可能会遇到的问题
MVC4 + .NET Framework 4.5 +Windows Server 2008+ IIS7.5 + 4.0集成模式池 ,初次发布后可能会遇到404.0 或者403.14错误,加入以下代码 ...
- zoj 2100 Seeding
Seeding Time Limit: 2 Seconds Memory Limit: 65536 KB It is spring time and farmers have to plan ...
- 403. Frog Jump
做完了终于可以吃饭了,万岁~ 假设从stone[i]无法跳到stone[i+1]: 可能是,他们之间的距离超过了stone[i]所能跳的最远距离,0 1 3 7, 从3怎么都调不到7: 也可能是,他们 ...
- git问题 next fetch will store in remotes/origin
项目在git的下无法查找到需要的Branch
- linux —— shell 编程(编程语法)
导读 本文为博文linux —— shell 编程(整体框架与基础笔记)的第4小点的拓展.(本文所有语句的测试均在 Ubuntu 16.04 LTS 上进行) 目录 再识变量 函数 条件语句 循环语句 ...
- android 小例之两列菜单关联
因为项目需要,做了个简单的菜单关联,其实很简单 左侧是个listview 选中的时候刷新右侧关联数据,类似网易新闻选择订阅页面 这里需要注意的是 在点击完左侧菜单列表的时候 直接右侧刷新会不一定出来数 ...
- android布局之线性布局
LinearLayout 线性布局有两种,分别是水平线性布局和垂直线性布局,LinearLayout属性中android:orientation为设置线性布局当其="vertical&quo ...
- PNP8550(3.3V DC蜂鸣器) - 原理图系列
一.截图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb2Jpbl9ITEo4MA==/font/5a6L5L2T/fontsize/400/fi ...
- Java SE 6 新特性: HTTP 增强--转
概述 Java 语言从诞生的那天起,就非常注重网络编程方面的应用.随着互联网应用的飞速发展,Java 的基础类库也不断地对网络相关的 API 进行加强和扩展.在 Java SE 6 当中,围绕着 HT ...
- iOS开发--通过MultipeerConnectivity完成蓝牙通讯
iOS开发–通过MultipeerConnectivity完成蓝牙通讯 iOS蓝牙通讯的三种方式: GameKit.framework:iOS7之前的蓝牙通讯框架,从iOS7开始过期,但是目前已经被淘 ...