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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
js调用网络摄像头的方法
Dec 05 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js post提交调用方法
2014/02/12 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
高中生学习的自我评价
2013/12/14 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书