Bootstrap被封装的弹层

前端技术 2023/09/07 JavaScript

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

具体使用很简单

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

上面代码分为两块，第一块ＭＶＣ扩展方法，主要用于在页面上输出弹层的代码段，第二段是Ａ标签的调用，主要用于绑定上面的弹层控件．

下面主要看一下弹层的扩展方法，它使用了Func<string, HelperResult>这个委托，用来接收前台的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被封装的弹层，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/19493

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案