http://v2.bootcss.com/javascript.html#modals
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object.
$('#myModal').modal({keyboard: false})
.modal('toggle')
手动打开或隐藏一个模态对话框。
$('#myModal').modal('toggle')
.modal('show')
手动打开一个模态对话框。
$('#myModal').modal('show')
.modal('hide')
手动隐藏一个模态对话框。
$('#myModal').modal('hide')
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap Model</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<!--<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>-->
<script>
$(document).ready(function() {
$('#windowTitleDialog').bind('show', function () {
document.getElementById ("xlInput").value = document.title;
});
});
function closeDialog () {
$('#windowTitleDialog').modal('hide');
};
function okClicked () {
document.title = document.getElementById ("xlInput").value;
closeDialog ();
};
function openDialog(){
$('#windowTitleDialog').modal('show');
};
</script>
</head>
<body>
<div id="windowTitleDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>请给窗口重新命名</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
<input class="xlarge" id="xlInput" name="xlInput" type="text" />
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" onclick="closeDialog ();">Cancel</a>
<a href="#" class="btn btn-primary" onclick="okClicked ();">OK</a>
</div>
</div>
<!--主控元素上设置data-toggle="modal",再设置data-target="#foo" 或href="#foo" 用以指向某个将要被启动的对话框的id-->
<div class="divButtons">
<!--a标签添加href="#windowTitleDialog"可以弹出弹窗,或者可以通过a标签cilck事件调用封装的openDialog()方法实现-->
<a data-toggle="modal" href="#windowTitleDialog" class="btn btn-primary btn-large" onclick="openDialog()">设置窗口名称</a>
</div>
</body>
</html>
效果如下:页面title由“Bootstrap Model”变成了“Bootstrap Model example”
- 大小: 64.8 KB
分享到:
相关推荐
eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框,确认框,提示框等,并且可以通过Ajax远程加载内容,还可以嵌入iframe框架等,功能非常齐全。
实际使用此插件 :rocket: : : 产品特点兼容AMD 可配置的正在安装有凉亭您可以使用bower bower install bootstrap-waitingfor来安装此模块,并包括来自build目录的文件。与npm 您可以使用npm npm install --save ...
Bootstrap自带了很多JQuery插件,给用户...Bootstrap自带了很多基本的插件,包括模态对话框、标签切换、Tooltip提示工具等。首先来总结下模态对话框的使用。 0x01基本样式 模态框(Modal)是覆盖在父窗体上的子窗体。通
#Angular2引导程序模式服务它是一个库,使Angular2中的引导模态插件的使用更加容易。 创建清晰且可重复使用的模态组件。 它使管理对话框变得轻松而清晰。 库不使用bootstrap js,仅使用CSS。 与引导程序3和引导程序...
bootprompt.js是一款ootstrap编程式对话框插件。该插件为原生的bootstrap提供模态对话框扩展功能,可以以编程的方式实现各种对话框效果,支持bootstrap3和bootstrap4。
jQuery插件,可在纯JavaScript中创建bootstrap 4模态。 安装 npm install bootstrap-show-modal 或者只是下载此存储库并包含src/bootstrap-show-modal.js 。 用法 简单模态 $ . showModal ( { title : "Hello World...
jquery.dialog2.js使用 bootstrap 提供的模态对话框,作为插件为网页提供可控的对话框功能。 特征 Ajax 内容 对话框中的 Ajax 链接和表单提交 加载指示器 本土化 对 jQuery.UI 没有依赖关系 可以通过进行控制 依赖...
F2 的 Bootstrap3 模态 ...这是一个插入式插件,将用 Bootstrap3 模态替换现有的F2.UI.alert和F2.UI.confirm对话框。 要求 安装 只需在全局命名空间中包含上述要求的页面上加载f2-plugin-bootstrap-modal.js脚本。
ModalLayer是一款带多种形式的模态框插件,js网页弹出框代码,支持倒计时、确认对话框、弹窗iframe等。
或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 1、用法 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上...
包括一个jQuery插件krajeeDialog (由Krajee创建),该插件可让您轻松配置bootstrap3-dialog库,或使用本机JS警报组件,或者还配置要使用的任何第三方JS Notification Library。 通过覆盖和增强使用yii的data-...
2 Bootstrap中的JS插件 2.1 模态框 操作案例1:利用模态窗体制作百度登录框 2.2 轮播图 操作案例2:利用.Bootstrap制作携程网首页的轮播图 2.3 选项卡 2.4 折叠 操作案例3:利用Bootstrap制作导航菜单 本章总结 本章...
bootstrap JavaScript插件 ppt 本章目标: 会使用模态框插件制作弹出的对话框 会使用选项卡插件制作页面的选项卡 会使用轮播图插件制作页面的轮播图 会使用滚动监听插件给网页元素添加监听
多层嵌套模态对话框 警报模式对话框提供info , warning , error , success , confirm类型 数据加载时,遮罩层会阻止所有元素 吐司对话框,提供info , warning , error , success类型和6个角位 灵活的样式设置...
bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下 在使用modal时首选需要引用js <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> [removed]...
Bootbox.js,是一个小型的JavaScript库用来创建简单的可编程对话框,基于Bootstrap的Modal(模态框)来创建。 官方说明 http://bootboxjs.com/v3.x/index.html Bootbox.js下载 我们可以在GitHub上找到开源的bootbox....
示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 本周作业 第16周 上节作业问题答疑 今日内容计划 CSS内容补充以及后台管理页面布局 后台管理页面布局 ...
03 jquery模态对话框与clone的应用 04 jqueryCSS操作之offsets,position以及scrolltop 05 jquery事件绑定与事件委托 06 jquery动画效果 07 jquery扩展与插件 08 jquery扩展补充 09 本周作业轮播图以及思路 第45章 ...
├─(29) 03 python s3 day44 jquery模态对话框与clone的应用.avi ├─(30) 04 python s3 day44 jqueryCSS操作之offsets,position以及scrolltop.avi ├─(31) 05 python s3 day44 jquery事件绑定与事件委托.avi ├─...