Bootstrap被封装的弹层

 更新时间:2016年07月20日 10:03:53   作者:张占岭  
这篇文章主要介绍了Bootstrap被封装的弹层 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

对于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'>
&times;
</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被封装的弹层,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JS获取input[file]的值并显示在页面的实现方法

    JS获取input[file]的值并显示在页面的实现方法

    下面小编就为大家分享一篇JS获取input[file]的值并显示在页面的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • js中递归函数的使用介绍

    js中递归函数的使用介绍

    所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意,处理不当就会进入死循环。递归函数只有在特定的情况下使用 ,比如阶乘问题
    2012-10-10
  • 原生JS实现轮播图效果

    原生JS实现轮播图效果

    这篇文章主要为大家详细介绍了原生JS实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 关于微信小程序登录的那些事

    关于微信小程序登录的那些事

    这篇文章主要给大家介绍了关于微信小程序登录的那些事,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 利用JavaScript控制元素(标签)的显示与隐藏

    利用JavaScript控制元素(标签)的显示与隐藏

    这篇文章主要给大家介绍了关于如何利用JavaScript控制元素(标签)的显示与隐藏的相关资料,JavaScript有多种方式可以实现,文中介绍了三种方法以及区别,需要的朋友可以参考下
    2023-07-07
  • js如何判断用户是在PC端和还是移动端访问

    js如何判断用户是在PC端和还是移动端访问

    这篇文章主要介绍了js如何判断用户是在PC端和还是移动端访问,需要的朋友可以参考下
    2014-04-04
  • JavaScript通过字典进行字符串翻译转换的方法

    JavaScript通过字典进行字符串翻译转换的方法

    这篇文章主要介绍了JavaScript通过字典进行字符串翻译转换的方法,涉及javascript字符串转换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript实现cookie的写入、读取、删除功能

    JavaScript实现cookie的写入、读取、删除功能

    cookie 是存在有效期的,在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束,本文给大家介绍关于javascript对于cookie的简单操作,比如对于cookie的写入和删除,代码简单易懂,需要的朋友参考下
    2015-11-11
  • Javascript 创建类并动态添加属性及方法的简单实现

    Javascript 创建类并动态添加属性及方法的简单实现

    下面小编就为大家带来一篇Javascript 创建类并动态添加属性及方法的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js+css完成网站的会员照片信息显示效果

    js+css完成网站的会员照片信息显示效果

    js+css完成网站的经典效果,一般用于会员排行榜中,会员信息的介绍,包括照片等。
    2010-06-06

最新评论