Bootstrap~大叔封装的弹层

时间:2022-09-18 19:04:15

回到目录

对于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

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

aaarticlea/png;base64,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" alt="" />

感谢咱们的阅读!

回到目录

Bootstrap~大叔封装的弹层的更多相关文章

  1. 原生JS封装 toast 弹层,自动关闭

    由于公司业务需求,要一个公共toast ,下面是自己封装的一个. css: .toast { text-align: center; min-height: 70px; width: 220px; c ...

  2. 基于layer简单的弹层封装

    /** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...

  3. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

  4. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  5. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  6. 利用UiWatchers 监听解决安卓自动化各种自动化各种非期待弹窗,弹层,升级,广告,对话框,来电等问题

    app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...

  7. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  8. React15&period;6&period;0实现Modal弹层组件

    代码地址如下:http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象 了解React. 使用过we ...

  9. Appium UiWatchers 监听解决各种非期待弹窗,弹层,弹弹弹等问题

    app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...

随机推荐

  1. java&lowbar;method&lowbar;数据去重

    /** * 判断list本身是否有重复数据和标题 * * @param list * @return newList 返回没有重复数据的list */ public List<String[]& ...

  2. mysql实体关系&lpar;mysql学习五&rpar;

    实体关系  表设计 1:1 两个实体表内,存在相同的主键字段 如果记录的主键值等于另一个关系表内记录的主键值,则两条记录的对应为一一对应 优化上称为垂直分割 1:n 一个实体对应多个其他实体(一个班级 ...

  3. 一个有趣的Ajax Hack示范

    今天在梦之光芒的BLOG上看见了一个Ajax Hack示范,其实跨站发现很容易,但是要做到大危害还是很难,偷偷COOKIE什么的只针对用户而已,XSS WORM的那种利用才是可怕的. 来看看他的一段V ...

  4. jquery之图片上传

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. &period;net Core&plus;Dapper MySQL增删改查

    新建一个用户表,以该有为例 1.Model层 public class TuiUsers { public int id { get; set; } public string userName { ...

  6. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

  7. SQL日期时间和字符串函数

  8. js 引擎 和 html 渲染引擎

  9. Linux&plus;Apache&plus;Mysql&plus;PHP优化技巧

    LAMP 平台由四个组件组成,呈分层结构.每一层都提供了整个软件栈的一个关键部分:Linux.Apache.MySQL.PHP. LAMP这个词的由来最早始于德国杂志“c't Magazine”,Mi ...

  10. jsp页面遍历List&lt&semi;Array&gt&semi;与Map

    数据结构下如图所示,之前的前辈遍历方法如下,代码直接抛异常哈, <c:if test="${!empty data1}"> <c:forEach items=&q ...