Bootstrap模态框的使用

最新推荐文章于 2024-05-10 03:13:22 发布
最新推荐文章于 2024-05-10 03:13:22 发布
阅读量246 收藏
点赞数
文章标签： bootstrap javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45744011/article/details/125150785
版权

主界面前端代码如下：

@model KZQFirstTestPaperless.Domain.ViewModel.FirstinspectionAccountViewModel
@using KZQFirstTestPaperless.Common
@{
    AjaxOptions ajax = new AjaxOptions()
    {
        UpdateTargetId = "ContentRow",
        HttpMethod = "Get"
    };
    ViewBag.Title = "首检领用";
    Layout = null;
}
<div class="panel panel-info" style="margin:20px">
    <div class="panel-heading text-center">
        <h4>首检领用</h4>
    </div>
    <div class="panel-body">
        <div id="tableRow" style="margin-top:10px">
            <div class="row" style="margin:10px 0px;">
                @using (Ajax.BeginForm("ReceivingFirstinspection", "Firstinspection", new { selectType = 1 }, ajax))
                {
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="barCode" placeholder="条码" value="@ViewBag.BarCode" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="modelCode" placeholder="机型编码" value="@ViewBag.ModelCode" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-1">
                        <input class="form-control" name="versionNumber" placeholder="版本号" value="@ViewBag.VersionNumber" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="receivingState" placeholder="领用状态" value="@ViewBag.ReceivingState" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <input class="form-control" name="fyStation" placeholder="封样位置" value="@ViewBag.FyStation" />
                    </div>
                    <div class="col-xs-4 col-sm-3 col-md-2">
                        <select class="form-control" name="typeName">
                            <option value="">--全部类别--</option>
                            <option value="变频">变频</option>
                            <option value="内机主板">内机主板</option>
                            <option value="显示器分体机">显示器分体机</option>
                            <option value="显示器柜机">显示器柜机</option>
                            <option value="遥控器">遥控器</option>
                        </select>
                        <span hidden>@ViewBag.TypeName</span>
                    </div>

                    <div class="col-xs-4 col-sm-3 col-md-1">
                        <button class="form-control btn btn-primary" type="submit">查询</button>
                    </div>
                }
            </div>
            <table class="table table-bordered table-hover table-striped table-responsive">
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].Id)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].BarCode)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ModelCode)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].VersionNumber)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].Number)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ProductionDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].FyState)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].FyStation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingTeam)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].Receiver)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingDuration)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingState)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].ReceivingTime)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FirstinspectionAccounts[0].TypeName)
                    </th>
                    <td></td>
                </tr>

                @foreach (var item in Model.FirstinspectionAccounts)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Id)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.BarCode)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ModelCode)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.VersionNumber)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Number)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ProductionDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.FyState)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.FyStation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingTeam)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Receiver)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingDuration)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingState)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReceivingTime)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TypeName)
                        </td>
                        <td>
                            <a href="/Firstinspection/ReceivingScan?id=@Html.DisplayFor(modelItem => item.Id,ajax)"
                               data-target="#ajax"
                               data-toggle="modal">
                                领用
                            </a>
                            <a href="/Firstinspection/ReceivingBackScan?id=@Html.DisplayFor(modelItem => item.Id,ajax)"
                               data-target="#ajax"
                               data-toggle="modal">
                                归还
                            </a>
                        </td>
                    </tr>
                }
            </table>
        </div>
        <div class="text-right">
            @Html.PageAjaxLinks(Model.PagingInfo, "#ContentRow", x => Url.Action("ReceivingFirstinspection", new { page = x, barCode = ViewBag.BarCode, modelCode = ViewBag.ModelCode, versionNumber = ViewBag.VersionNumber, receivingState = ViewBag.ReceivingState, typeName = ViewBag.TypeName, fyStation = ViewBag.FyStation }))
        </div>
    </div>
</div>
<div class="modal" id="ajax" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>

 将领用界面放在模态框中前端代码如下：

@model KZQFirstTestPaperless.Domain.Models.FirstinspectionAccount
@{
    AjaxOptions ajax = new AjaxOptions()
    {
        UpdateTargetId = "ContentRow",
        HttpMethod = "Post"
    };
    ViewBag.Title = "ReceivingScan";
    Layout = null;
}
@using (Ajax.BeginForm("ReceivingScan", ajax))
{
    @Html.AntiForgeryToken()
    <div class="modal-header">
        <h4 class="modal-title">首检领用</h4>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.Id)
            @Html.HiddenFor(model => model.ModelCode)
            @Html.HiddenFor(model => model.VersionNumber)
            @Html.HiddenFor(model => model.Number)
            @Html.HiddenFor(model => model.ProductionDate)
            @Html.HiddenFor(model => model.FyState)
            @Html.HiddenFor(model => model.FyStation)
            @Html.HiddenFor(model => model.TypeName)
            @Html.HiddenFor(model => model.Status)
            <div id="Receive" class="form-group">
                @Html.LabelFor(model => model.BarCode, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.BarCode, new { htmlAttributes = new { @name = "barcode", @class = "form-control", @readonly = "readonly" } })
                    @Html.ValidationMessageFor(model => model.BarCode, "", new { @class = "text-danger" })
                </div>
            </div>
            <div id="ReceiveCheck" class="form-group">
                <label class="control-label col-md-2">确认条码</label>
                <div class="col-md-10">
                    <input type="text" name="barcodeCheck" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Receiver, new { htmlAttributes = new { @name = "receiver", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Receiver, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ReceivingDuration, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <select class="form-control" name="receivingDuration">
                        <option value="">--全部时长--</option>
                        <option value="2小时">2小时</option>
                        <option value="4小时">4小时</option>
                        <option value="12小时">12小时</option>
                        <option value="24小时">24小时</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input id="submit-btn" type="submit" value="保存" style="display:none;" />
                <input id="commit-btn" type="button" value="保存" class="btn btn-default" data-dismiss="modal" />
                <button @*id="close"*@ type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $("html").removeClass();
            $('.modal-backdrop:gt(2)').remove();
            //点击假的保存触发真的保存
            $('#commit-btn').click(function (e) {
                $("#submit-btn").click();
                //table.ajax.reload();
                //var recentFormTag = $(this).parents("form")[0];
                //if (recentFormTag) {
                //    recentFormTag.submit()
                //}
            });
            //$('#close').click(function (e) {
            //    table.ajax.reload();
            //});
        })
    </script>
}

实现效果图如下：

 

sunflower(*^ω^*)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
选中页面一条数据在模态框里显示
weixin_44550198的博客
08-16 1557
开发工具与关键技术：VS 查询 作者：卢远平 撰写时间：2019.8.16 查询数据库数据显示在页面，这是非常常用的，也能算是非常基础的操作，查询出来后，我在页面的每一条数据后拼接了一个打开模态框的按钮，而我要实现选中页面的一条数据在模态框里也显示选中的那一条数据。 先是在控制器写要在模态框里显示的查询方法，首先是传入楼栋ID，好让页面传参，接着是一个多表查询写法，查询条件楼栋ID和状态为待租的...
bootstrap3-dialog：更强大、更灵活的模态框
沉默王二
04-19 4万+
nakupanda开源作者封装了一个更强大、更灵活的模态框——bootstrap3-dialog
Bootstrap 显示模态框
最新发布
2401_84048445的博客
05-10 594
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
bootstrap 模态
weixin_30664615的博客
07-14 63
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script> //这个js里主要是需要用到jquery.ui.draggable.js,但是这个js需要依赖其他的js,所以我直接上jquery-ui的官网上根据自己的需要生成 这样子，一个基本的bootstrap模态框就写好了，但是现在...
弹窗和模态窗口
Holly_Word的博客
10-23 424
1)方式一：通过标签的属性data-toggle="modal" data-target="模态窗口的id"点击添加了data-dismiss=""属性的标签，自动关闭该标签所在的模态窗口。模态窗口本质上就是原来页面中的一个，只有一个页面;选择器(选中div).modal("show");弹窗 window.open("url","_blank");模态窗口：模拟的窗口,本质上是，通过设置z-index大小来实现的;3)方式三：通过标签的属性data-dismiss=""
bootstrap的模态框使用方法
qq_40666620的博客
09-05 458
bootstrap的模态框使用方法 使用方式一：使用绑定class方式进行弹出： 在一个起控制器作用的元素（例如：按钮）上添加 data-toggle=“modal” 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。 <button type="button" data-toggle="modal" data-target...
Bootstrap模态框使用详解
08-31
以下是对Bootstrap模态框的详细解释和使用方法。 ### 1. 基本结构 Bootstrap模态框由四部分组成： 1. 触发按钮（Trigger button）：用于打开模态框，通常是一个`<button>`元素，带有`data-toggle="modal"`和`data...
Bootstrap3 模态框使用实例
08-31
以下是对Bootstrap3模态框使用实例的详细解析： 1. **模态框结构**： 模态框由几个主要部分组成： - `.modal`：这是模态框的外层容器，带有`.fade`类可以实现淡入淡出效果。 - `.modal-dialog`：定义了模态框的...
BootStrap 模态框实现刷新网页并关闭功能
08-31
Bootstrap模态框（Modal）是前端开发中常用的一种交互组件，它允许在当前...希望这篇文章对你在使用Bootstrap模态框时有所帮助，如果你在实践中遇到任何问题，欢迎留言提问，我们将尽力为你解答。感谢你对我们的支持！
Bootstrap模态框（Modal）实现过渡效果
08-31
第二种方法是通过 JavaScript，使用 jQuery 来调用模态框（Modal）。例如： ```javascript $('#myModal').modal(options) ``` 在上面的代码中，`#myModal` 是模态框（Modal）的 id，`options` 是模态框（Modal）的...
bootstrap模态框实现弹出窗口修改表格数据
Adobe_java的博客
01-24 2973
通过bootstrap模态框实现弹出窗口修改表格数据
模态框配合Bootstrap-Table渲染数据展示异常错位问题
FeiSir_PC的博客
11-14 1614
下面多出来了一行，当然了，自己试的话能够清晰，这里图上不容易看出来，而且上传到这上面的图片会被压缩，更不清晰，最好自己线下试一下，当然了，当你正在看我这个问题的时候，可能你也遇到了这种问题，然后看一下更严重的下现象，像下图这样，这样就更明显了吧，其实就是u浏览器渲染数据的时候，底部数据没有个和模态框范文范围对其齐，实际应用中，只要布局是按照bootstrap官方布局文档布局，不会出现下图的情况，只会出现图1的错误，多出来一行，显眼又不显眼，下图我是为了更明显的展示错误。这里是模态框渲染出来的样式。
bootstrap模态框之间的数据交互,使用Bootstrap将数据从模态传递到父窗口
weixin_30548963的博客
02-23 738
As an example, I have a page that when loads, lists all employees. There is a button on the page that when clicked, initializes a (bootstrap) modal with a form. I populate the form, and click 'Submit'...
Bootstrap 插件-模态窗体
litengbin的博客
01-21 355
1 : 静态模态窗口     2 : 点击弹出     3 : 不要动画效果     4 : 点击空白不会收起     5 : 使用JS控制模态窗口     6 : 监听模态的变化     静态模态窗口 ×Close 提问
关于BootStrap中Modal（模态框）使用心得
热门推荐
heshouyou的博客
12-24 6万+
关于BootStrap中Modal（模态框）使用心得 一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jquery，所以我们要在导入bootstrap.js前面导入jquery.min.js 对
Bootstrap 模态对话框
歪脖先生的博客
03-12 4127
模态对话框JavaScript内置了 3 种对话框：alert()、prompt()、confirm()。alert() 只是一个简单的提示对话框，prompt() 可以接受用户输入的信息，confirm() 允许用户执行选择性操作。当弹出一个对话框时，浏览器会停止解析页面，并中断脚本执行，直到用户关闭对话框。因此，这些对话框被称作模态对话框。JavaScript提供的对话框外观丑陋，功能过于简单...
bootstrap模态框弹出居中显示
wanlin77的博客
01-10 9779
在项目中，有几个使用bootstrap模态框弹出问题，在单页面上是居中显示，但是嵌套在别的iframe中，弹出的位置在靠近顶部的位置。 查阅了一些资料，有几种解决方案，1修改bootstrap的js文件，使弹出的位置居中 2在每个页面弹出时，修改弹出的位置 3把bootstrap模态框弹出iframe的最外层 在实际操作中，使用第一种方式，会影响到其他使用到bootstrap的相关的未知影响，第三...
bootstrapTable 模态框 显示表格数据的问题
hch的博客
12-12 3429
那些div等都设置了大小了，但是到刷新数据的时候，现在数据已经出到外面了，在div外面了，类似如下图，完全不好看 1 我的模态框设置如下： <div class="modal" id="ChangeAssetsListForm" tabindex="-1" role="dialog" aria-labelledby="fLoadBillModalLabel" aria-hi...
bootstrap模态框
08-03
引用[1]、[2]和[3]提供了关于Bootstrap模态框的三个示例。Bootstrap模态框是一种常用的弹出窗口组件，用于在网页中显示临时的内容或交互。模态框通常包含一个标题、内容和底部按钮。用户可以通过点击按钮或链接来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值