bootstrap模态框远程示例代码分享
本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>XXX</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="css/main.css"> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> </head> <body> <!--通过按钮可以加载模态框内容,一定要加上头部和底部--> <div class="modal-header"> <!--关闭按钮--> <button class="close" data-dismiss="modal"><!--可以关闭模态框--> <span>×</span> </button> <!--头部标题--> <h4 class="modal-title">远程登录</h4> </div> <div class="modal-body"> <!--<p>暂时无法注册</p>--> <div class="container-fluid"><!--在模态框主体部分还可以加入流体的栅格系统,一定是流体--> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6">haha</div> <div class="col-lg-4 col-md-4 col-sm-6">hehe</div> <div class="col-lg-4 col-md-4 col-sm-6">heihei</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">远程</button> <button class="btn btn-primary">远程</button> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
在上篇基于BootStrap Metronic开发框架经验小结[二]列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://
-
JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部
-
BootStrap模态框和select2合用时input无法获取焦点的解决方法
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1" 删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myMod
-
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide
-
BootStrap的select2既可以查询又可以输入的实现代码
首先关键一句话: $(".js-example-tags").select2({ tags: true }) 别小看此代码功能可谓强大,在需要的地方直接加进去class如下代码所示: <div class="form-group required"> <label class="control-label col-sm-4">测试select2: </label> <div class="col
-
BootStrap select2 动态改变值的方法
1,selec2动态赋值 var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" }); $("#e_pid").attr("value", tempP); $("#e_pid").select2({ placeholder: "查找停车场名称(多选)", language: "zh-CN", minimumInp
-
JS组件Bootstrap Select2使用方法解析
本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下 效果图: 无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及: {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/select2.min.css') }} {{ stylesheet_link('css/font-
-
bootstrap模态框远程示例代码分享
本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
Bootstrap 模态框(Modal)插件代码解析
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my
-
原生JavaScript实现模态框的示例代码
目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&
-
jQuery将多条数据插入模态框的示例代码
//Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal
-
bootstrap轮播图示例代码分享
本文实例为大家分享了bootstrap轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
-
bootstrap模态框示例代码分享
本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
-
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下: <!--最外层包裹的模态框--> <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari
-
bootstrap警告框示例代码分享
本文实例为大家分享了bootstrap警告框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
-
Bootstrap模态框(modal)垂直居中的实例代码
Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b
-
Bootstrap模态框插入视频的实现代码
下面代码实现别忘了前提是要在bootstrap框架下使用 一.效果 点击模态框 跳出自己已做好的MP4等格式视频 二.Bootstrap代码 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button> <div class=&quo
随机推荐
- go语言template用法实例
- ExtJS 2.2.1的grid控件在ie6中的显示问题
- c#匹配整数和小数的正则表达式
- Mac OSX下使用MAMP安装配置PHP开发环境
- JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
- ASP.NET Cache的一些总结分享
- android LinearLayout 布局实例代码
- codeigniter教程之上传视频并使用ffmpeg转flv示例
- Android自定义View实现shape图形绘制
- php_screw 1.5:php加密: 安装与使用详解
- php版微信公众账号第三方管理工具开发简明教程
- Python实现多并发访问网站功能示例
- JavaScript通过字符串调用函数的实现方法
- 基于vue2的table分页组件实现方法
- android图像绘制(五)画布保存为指定格式/大小的图片
- Win2003下cwRsyncServer服务端与cwRsync客户端数据同步实例教程
- CentOS设置静态IP的方法总结
- PHP单例模式详解及实例代码
- BootStrapValidator与My97日期校验的实例代码
- 解析strtr函数的效率问题