Bootstrap之javascript插件---弹出框(模态框)Modal

简介:

  弹出框是一个经常使用的组件,一般用于弹出提示信息,确认信息,表单内容。

完整结构分析(可以没有头部和底部):

代码示例:

<!-- 弹出框的头部 -->
    <div class="modal fade">
        <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">Modal title</h4>
                </div>
<!-- 弹出框的内容   -->
                <div class="modal-body">
                    ...
                </div>
<!-- 弹出框的底部 -->
                <div class="modal-footer">
<!-- 设置了data-dismiss="modal"属性,就可以关闭该弹出框 -->
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div> 

※ 当需要为某个元素设置弹出框时,为该元素设置 data-toggle="modal"(激活模态框属性),data-target="#about"(用于指向被控制的模态框)此处也不是特别理解,如有高见请各位小伙伴不吝赐教。

时间: 2024-10-13 02:03:49

Bootstrap之javascript插件---弹出框(模态框)Modal的相关文章

bootstrap弹出的模态框水平垂直居中的实现

学习javascript从入门到放弃!,这是第一篇随笔,经验不足,如有不当之处,还望指出.好了废话不多说直接切入正题吧 1.bootstrap默认的model写法: //触发模态框的button <button data-toggle="modal" data-target="#myModal"type="button" class="btn btn-default" >button </button>

用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面

HTML代码: <div class="modal fade" id="NoPermissionModal"> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header"> <%-- <button type="button"

javascript只弹出一次框 再次刷新不弹出

.打开页面自动弹出  当关闭弹框的时候  设置cookie生存时间  再次刷新页面判断cookie是否失效 <html> <head> <meta charset="utf-8" /> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width:

使用Jquery.form.js ajax表单提交插件弹出下载提示框

现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼容性的问题.在谷歌和火狐下没这个问题,我用的ie9测试是有这个问题的.具体的详细我参照的该链接: http://zhidao.baidu.com/link?url=uTXondC9ECEfdObEWbq7V2O7-UW_oXtoVcneVqH_Dmj2hUXjM3y6wMFnQYsUupdWC0Tf

Bootstrap历练实例:弹出框(popover)事件

事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#mypopover').on('show.bs.popover', function () { // 执行一些动作... }) shown.bs.popover 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成). $('#mypopover').on('shown.bs.popover',

bootstrap中popover.js(弹出框)使用总结+案例

bootstrap中popover.js(弹出框)使用总结+案例 *bootstrap官方说明:http://v3.bootcss.com/javascript/#popovers 一. popover常用配置参数: 1 //常用配置参数: 2 $(document).ready(function() { 3 $('#temp').popover( 4 { 5 trigger:'click', //触发方式 6 template: '', //你自定义的模板 7 title:"标题",

bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); 这个是国内同学的解决方法: http://www.oschina.net/question/226830_143869 //显示modal $('#m

Bootstrap导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaSc

bootstrap学习——javascript插件篇

飞最近做的一个小项目需要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有对应插件,以下是学习应用流程: 1.    引入js文件: 可以单个引入对应插件文件,或一次全部引入,飞是选择的后者,原因:引入bootstrap.min.js文件并不大. 2.    先看模态框的效果,然后查看如何使用动态实例, 使用方法很简单: <1>直接复制动态实例的代码(当然要起码知道涉及到的一些类的作用,如.fade 类作用是弹出动画效果) <2>根据我的需要修改样例的代码(去