`
lg_asus
  • 浏览: 190947 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

基于boostrap的tipWindow,confirmWindow,modalWindow

阅读更多
//万能模态弹出框。标题,显示的元素id,一般放在<script>里不占用DOM,参考kendo ui template,btns是按钮数组,callbacks按钮注册的click回调。
//<script type="text/template" id="id"><div class="row"></div></script> script的type不为text/javascript即可,这样浏览器不会解析,且通过$("#id")是能取到的,但是取出来的不是一个DOM节点,因此常用的操作DOM方法不能用于它。
function modalWindow(title,element,btns,callbacks){
	var footer = $("<div>").addClass("modal-footer").append($("<button>").attr("type","button").addClass("btn btn-default").attr("data-dismiss","modal").text("关闭"));
	if(btns){
		if(!$.isArray(btns)){
			footer.append($("<button>").attr("type","button").addClass("btn btn-primary").html(btns).on("click", callbacks));
		}else{
			$.each(btns, function(index,btn){
				footer.append($("<button>").attr("type","button").addClass("btn btn-primary").html(btn).on("click", callbacks[index]));
			});
		}
	}
	$("<div>").addClass("modal fade").attr("role", "dialog").append($("<div>").addClass("modal-dialog").append($("<div>").addClass("modal-content").append($("<div>").addClass("modal-header")
	.append($("<button>").attr("type","button").addClass("close").attr("data-dismiss","modal").html("&times;")).append($("<h4>").addClass("modal-title").html(title)))
	.append($("<div>").addClass("modal-body").append($(element).html())).append(footer))).modal("show");
}

//提示框
function tipWindow(content,okBtn){
	var footer = $("<div>").addClass("modal-footer").append($("<button>").attr("type","button").addClass("btn btn-primary").attr("data-dismiss","modal").text(okBtn||"关闭"));
	$("<div>").addClass("modal fade").attr("role", "dialog").append($("<div>").addClass("modal-dialog").append($("<div>").addClass("modal-content").append($("<div>").addClass("modal-header")
	.append($("<button>").attr("type","button").addClass("close").attr("data-dismiss","modal").html("&times;")).append($("<h4>").addClass("modal-title").html("系统提示")))
	.append($("<div>").addClass("modal-body").append($("<p>").html(content))).append(footer))).modal("show");
}

//取消确认框
function confirmWindow(title,content,okBtn,cancelBtn,okCallback,cancelCallback){
	var cancel = $("<button>").attr("type","button").addClass("btn btn-default").text(cancelBtn);
	if(cancelCallback && typeof cancelCallback == 'function'){
		cancel.on("click", cancelCallback);
	}else{
		cancel.attr("data-dismiss","modal");
	}
	var ok = $("<button>").attr("type","button").addClass("btn btn-primary").text(okBtn).on("click", okCallback);
	var footer = $("<div>").addClass("modal-footer").append(cancel).append(ok);
	$("<div>").addClass("modal fade").attr("role", "dialog").append($("<div>").addClass("modal-dialog").append($("<div>").addClass("modal-content").append($("<div>").addClass("modal-header")
	.append($("<button>").attr("type","button").addClass("close").attr("data-dismiss","modal").html("&times;")).append($("<h4>").addClass("modal-title").html(title)))
	.append($("<div>").addClass("modal-body").append(content)).append(footer))).modal("show");
}
分享到:
评论

相关推荐

    基于Bootstrap V3的Modal 进行 Dialog 二次封装 原创文章

    Bootstrap V3中的Modal组件是一个非常实用的特性,它允许开发者在网页上创建模态对话框,无需离开当前页面即可展示信息、获取用户输入或者执行其他交互操作。在本篇文章中,作者进行了对Modal的二次封装,创建了一个...

    基于bootstrap的管理系统

    基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于bootstrap的后台管理系统基于...

    基于Bootstrap的零食商城.zip

    基于Bootstrap的零食商城.zip基于Bootstrap的零食商城.zip基于Bootstrap的零食商城.zip基于Bootstrap的零食商城.zip基于Bootstrap的零食商城.zip基于Bootstrap的零食商城.zip基于Bootstrap的零食商城.zip基于...

    基于Bootstrap的静态网页设计作业.zip

    基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页...

    基于bootstrap的简单 后台管理 系统

    这个基于Bootstrap的简单后台管理系统采用了扁平化设计,以简洁、实用为主要特点,旨在提供一个易于理解和使用的操作界面。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,它是一个CSS/HTML框架,包含...

    基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0

    基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于bootstrap4.0 的后台模板ACE-Pages3.0基于...

    一个基于Bootstrap的书店模板.zip

    一个基于Bootstrap的书店模板.zip一个基于Bootstrap的书店模板.zip一个基于Bootstrap的书店模板.zip一个基于Bootstrap的书店模板.zip一个基于Bootstrap的书店模板.zip一个基于Bootstrap的书店模板.zip一个基于...

    基于bootstrap的前端网站设计

    本教程主要关注基于Bootstrap的前端网站设计,适合初学者、学生、进行课程设计或毕业设计的人群。Bootstrap提供了丰富的组件、预定义的样式和易于使用的网格系统,能够帮助开发者快速构建美观且功能丰富的网站。 1....

    基于bootstrap3的Metronic模板

    基于bootstrap3的Metronic模板,新版本,比较全面! 和资源库中10分的资源一样,我还加入了基于2.3的版本。 解压分成基于bootstrap3版本和基于bootstrap2.3的2个版本。

    基于BootStrap简洁美观Cron表达式选择器JS插件

    **基于BootStrap简洁美观Cron表达式选择器JS插件**是一款优秀的前端开发工具,专为需要在用户界面中方便地输入或选择Cron表达式的项目设计。Cron表达式是一种广泛用于计划任务调度的语言,它允许设置精确的时间间隔...

    基于Bootstrap的Java企业通用开发平台框架_maven_hibernate

    基于Bootstrap的Java企业通用开发平台框架_maven_hibernate,基于Bootstrap的Java企业通用开发平台框架_maven_hibernate,基于Bootstrap的Java企业通用开发平台框架_maven_hibernate

    基于Bootstrap的CSS3菜单.zip

    这个名为"基于Bootstrap的CSS3菜单.zip"的压缩包包含了一个利用Bootstrap框架和CSS3技术实现的3D立体视觉效果的下拉菜单。这样的菜单在网页设计中尤其重要,因为它能够提供用户友好的导航体验,特别是在内容丰富的...

    基于bootstrap(前端)+springboot(后端)的学生自习室预约管理系统源码+sql数据库.zip

    基于bootstrap(前端)+springboot+mybatis(后端)的学生自习室预约管理系统源码+sql数据库.zip基于bootstrap(前端)+springboot+mybatis(后端)的学生自习室预约管理系统源码+sql数据库.zip基于bootstrap(前端)+...

    基于bootstrap管理平台原型

    3. **JavaScript插件**:Bootstrap还提供了一些基于jQuery的插件,如滚动监听(Scrollspy)、模态(Modal)、折叠(Collapse)、轮播(Carousel)等,它们为网页添加了动态效果和交互性。 4. **定制化**:虽然...

    基于Bootstrap+php+jquery酒店预订系统后台管理系统

    基于Bootstrap框架的界面布局 封装PDO数据库操作类,实现增删改查等等常见功能,调用简单 随机酒店推荐策略 多条件模糊搜索酒店算法 jquery表格插件Datatables的使用大大丰富了数据的展现方式,更具交互性。具有自动...

    基于bootstrap+thymleaf+springboot+mysql 搭建的个人博客项目.zip

    基于bootstrap+thymleaf+springboot+mysql 搭建的个人博客项目.zip基于bootstrap+thymleaf+springboot+mysql 搭建的个人博客项目.zip基于bootstrap+thymleaf+springboot+mysql 搭建的个人博客项目.zip基于bootstrap+...

    基于Bootstrap 后台界面

    在“基于Bootstrap 后台界面”的项目中,我们通常会利用Bootstrap的组件和样式来创建一个美观且功能丰富的管理后台。这个后台界面不仅设计得非常漂亮,而且具有主题更换功能,能够满足不同用户的个性化需求。同时,...

    基于Bootstrap的管理后台模板源码

    总的来说,“基于Bootstrap的管理后台模板源码”是一个强大的起点,可以帮助开发者节省时间和精力,快速构建出专业且功能丰富的后台管理系统。理解并熟练运用其中的HTML、CSS和JavaScript技术,以及Bootstrap的组件...

    基于bootstrap的后台管理页面(无业务,纯HTML、JS、CSS).zip

    基于bootstrap的后台管理页面(无业务,纯HTML、JS、CSS).zip基于bootstrap的后台管理页面(无业务,纯HTML、JS、CSS).zip基于bootstrap的后台管理页面(无业务,纯HTML、JS、CSS).zip基于bootstrap的后台管理...

    基于bootstrap开发的电子商城首页项目

    **基于Bootstrap的电子商城首页项目详解** Bootstrap,作为全球最流行的前端开发框架,以其响应式设计和丰富的组件库,极大地简化了网页开发流程。在这个基于Bootstrap的电子商城首页项目中,开发者利用HTML5和CSS3...

Global site tag (gtag.js) - Google Analytics