Bootstrap被封装的弹层


Posted in Javascript onJuly 20, 2016

对于Bootstrap的弹层,插件有很多,今天主要用的是它自带的功能,通过bootstrap提供的模式窗口来实现的,而小编主要对使用方法进行了封装,开发人员可以自己动态传入弹层的HTML内容,可以控制按钮的显示与隐藏,用户通过MVC扩展方法对弹层进行生成,然后使用A标签进行调用.

具体使用很简单

@Html.GenerateDialog("测试",true, 
@<div>
<form action="/home/index">hello world!</form>
</div>)
<a data-toggle='modal' data-target='#LindModal'>测试弹层</a>

上面代码分为两块,第一块MVC扩展方法,主要用于在页面上输出弹层的代码段,第二段是A标签的调用,主要用于绑定上面的弹层控件.

下面主要看一下弹层的扩展方法,它使用了Func<string, HelperResult>这个委托,用来接收前台的HTML代码段,这对于开发人员是个福音,你不用关心如何去拼接HTML代码了,而是直接把前台给我们的代码复制过来即可.

弹层方法

#region Bootstrap弹层
/// <summary>
/// bootstrap风格的弹层
/// </summary>
/// <param name="htmlHelper"></param>
/// <param name="isBtn"></param>
/// <param name="result"></param>
/// <returns></returns>
public static MvcHtmlString GenerateDialog(this HtmlHelper htmlHelper, bool isBtn, Func<string, HelperResult> result)
{
return GenerateDialog(htmlHelper, "详细", isBtn, result);
}
/// <summary>
/// bootstrap风格的弹层
/// </summary>
/// <param name="htmlHelper"></param>
/// <param name="title"></param>
/// <param name="isBtn"></param>
/// <param name="result"></param>
/// <returns></returns>
public static MvcHtmlString GenerateDialog(this HtmlHelper htmlHelper, string title, bool isBtn, Func<string, HelperResult> result)
{
string templete = @"<div class='modal fade' id='LindModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close'
data-dismiss='modal' aria-hidden='true'>
×
</button>
<h4 class='modal-title' id='myModalLabel'>"+title+
@"</h4>
</div>
<div class='modal-body' id='dialogContent'>
" + result.Invoke(null) + "</div>";
if (isBtn)
{
templete +=
@"<div class='modal-footer'>
<button type='button' class='btn btn-warning'
data-dismiss='modal'>
关闭
</button>
<button type='button' class='btn btn-primary' id='subBtn'>
提交
</button>
</div>";
}
templete +=
@"</div>
</div>
</div>
<script>
$('#subBtn').click(function(){$('#dialogContent form').submit();});
</script>";
return MvcHtmlString.Create(templete);
}
#endregion

而运行的效果是我们可以想到的

Bootstrap被封装的弹层

以上所述是小编给大家介绍的Bootstrap被封装的弹层,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
必备的JS调试技巧汇总
Jul 20 #Javascript
JavaScript的==运算详解
Jul 20 #Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 #Javascript
javascript中数组和字符串的方法对比
Jul 20 #Javascript
js简单实现图片延迟加载的方法
Jul 19 #Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 #Javascript
JavaScript新增样式规则(推荐)
Jul 19 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
10 分钟快速入门 Python3的教程
2019/01/29 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Pandas分组与排序的实现
2019/07/23 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python实现银行实战系统
2020/02/26 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
教育实习生的自我评价分享
2013/11/21 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
询价采购方案
2014/06/09 职场文书
职称评定个人总结
2015/03/05 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Django Paginator分页器的使用示例
2021/06/23 Python
redis 存储对象的方法对比分析
2021/08/02 Redis
Python编写冷笑话生成器
2022/04/20 Python