bootstrap 模态窗口实例

最新推荐文章于 2024-04-20 12:04:09 发布
最新推荐文章于 2024-04-20 12:04:09 发布
阅读量2k 收藏
点赞数
分类专栏： .NET VB.net MVC,MVP,MVVM JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsjpanxiaoyu/article/details/51901664
版权
.NET 同时被 3 个专栏收录
197 篇文章 1 订阅
订阅专栏
VB.net
48 篇文章 1 订阅
订阅专栏
JQuery
46 篇文章 0 订阅
订阅专栏
@ModelType IEnumerable(Of MVCTEST.TestTable)


@Code
    Layout = Nothing
End Code


<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>


    @*<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">*@
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    @*<script src="/scripts/jquery.min.js"></script>*@
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    @*<script src="/bootstrap/js/bootstrap.min.js"></script>*@
    <script src="~/Scripts/bootstrap.min.js"></script>


</head>
<body>
    <!-- 提示框 --> 
    <div id="myAlert" class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        错误！请进行一些更改。
    </div>
    <!-- 提示框被关闭后触发方法 -->
    <script type="text/javascript">
        //$(function () {
        //    $("#myAlert").bind('closed.bs.alert', function () {
        //        alert("警告消息框被关闭。");
        //    });
        //    $("#myAlert").visible = false;
        //});


        $(function () {
            $('#mydelete').click(function () {
                alert("要变更吗？");
                $("#myAlert").visible = false;
            });
        });


    </script> 


    <p>
        @Html.ActionLink("新　　規", "Create")
    </p>


    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal">
        开始演示模态框
    </button>
    
    <!-- 提示框被关闭后触发方法 -->
    <script type="text/javascript">
        function aa()
        {
            alert("点击提交更改按钮啦");
           
            $.ajax({
                type: "POST",
                url: "http://localhost:57698/TestTables/aaa",
                data: "id=3",// + $("#text1").val(),
                //success: function () {
                //    alert("添加成功！");
                //}
            });


            $('#myModal').modal('hide')
        }
    </script>  
    




    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" data-backdrop="static" 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">
                        模态框（Modal）标题
                    </h4>
                </div>
                <div class="modal-body">
                    在这里添加一些文本
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" id="submitbtn" class="btn btn-primary" οnclick="aa()" >
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <table class="table">
        <tr>
            <th>
                @*@Html.DisplayNameFor(Function(model) model.itemName)*@
                @Html.DisplayName("項目名")
            </th>
            <th>
                @*@Html.DisplayNameFor(Function(model) model.itemStr)*@
                @Html.DisplayName("項目内容")
            </th>
            <th>
                @*@Html.DisplayNameFor(Function(model) model.itemDec)*@
                @Html.DisplayName("小数項目")
            </th>
            <th>
                @*@Html.DisplayNameFor(Function(model) model.itemInt)*@
                @Html.DisplayName("整数項目")
            </th>
            <th>
                @*@Html.DisplayNameFor(Function(model) model.itemFlg)*@
                @Html.DisplayName("RadioButtonフラグ")
            </th>
            <th>
                @Html.DisplayName("日付")
            </th>
            <th>
                @Html.DisplayName("操　　作")
            </th>
        </tr>
    
    @For Each item In Model
        @<tr>
            <td>
                @Html.DisplayFor(Function(modelItem) item.itemName)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.itemStr)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.itemDec)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.itemInt)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.itemFlg)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.itemDateTime)
            </td>
            <td>
                @*οnclick="return confirm('alert('确定要删除吗？')"*@
                @Html.ActionLink("変更", "Edit", New With {.id = item.id, .itemFlg = item.itemFlg}) |


              @Html.ActionLink("詳細", "Details", New With {.id = item.id}) |
                @Html.ActionLink("削除", "Delete", New With {.id = item.id}, New With {.id = "mydelete"})
            </td>
        </tr>
    Next
    
    </table>
</body>
</html>
努力成为好爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap模态窗口源码解析
08-31
首先，`Modal` 是一个构造函数，用于创建模态窗口实例。在这个构造函数中，会初始化一些必要的变量和常量，例如`options`（用户自定义的配置）、`$body`（文档主体）、`$element`（模态窗口元素）以及`isShown`...
Bootstrap 模态框实例插件案例分析
10-20
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。下面通过本文给大家介绍如何使用bootstrap插件来实现模态框
ASP.NET MVC ajax 提交列表到 Action
weixin_30546189的博客
12-25 116
1. Action 的代码 [HttpPost] public ContentResult SaveData(List<ClsA> listA, List<ClsA> listB) { return Content(string.Format("{0},{1}", listA.Count, listB.Count)); } 2. 以 Js...
Bootstrap模态窗实例
09-12 91
导入相关插件 <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css"> <script src="{% static '/plugin/jquery/jquery-3.3.1.min.js' %}"></script> <script sr...
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
最新发布
Flag少侠的博客
04-20 1254
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名：modal-fullscreen。默认情况下提示框显示在元素上方。类名：modal-xl。类名：modal-lg。
一个模态窗口实例
懒虫的博客
01-08 147
例一: <h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role
Bootstrap模态框的简单示例
weixin_34194379的博客
02-14 56
前言 使用之前要先引入bootstrap.css，bootstrap.js或bootstrap.min.js，两种js文件的区别是一个未压缩一个压缩，无需全部引入。注意：所有插件都依赖jQuery（也就是说，jQuery必须在所有插件之前引入页面）bootstrap引入方法：将文件bootstrap.js或bootstrap.min.js放到所在项目的ww...
bootstrap模态框实例
热门推荐
nic's blog
06-23 1万+
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 详细使用：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html 实例： 在这里我们定义了一个修改按钮 &lt;button type="button" class="bt...
Bootstrap3 模态框使用实例
08-31
以下是对Bootstrap3模态框使用实例的详细解析： 1. **模态框结构**： 模态框由几个主要部分组成： - `.modal`：这是模态框的外层容器，带有`.fade`类可以实现淡入淡出效果。 - `.modal-dialog`：定义了模态框的...
Bootstrap 模态框（Modal）带参数传值实例
01-19
模态框（Modal）是覆盖在父窗体上的子窗体。...以上所述是小编给大家介绍的Bootstrap 模态框（Modal）带参数传值实例，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的
bootstrap模态框简单案例
TXW6666的博客
11-03 538
模态框（Modal） 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下提示信息，确认信息，表单,登录，注册等内容。模态框弹出时其他页面元素不可被选中。 首先需要定义一个按钮 同时定义 data-toggle=“modal” data-target="#exampleModalCenter" <button type="button" class="btn btn-primary" data-toggle="modal" data-targ
Bootsrap 模态框简单示例
wyqgg123的博客
07-06 124
模态框 模态框代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 2769
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
bootstrap-table + 事件 + 动态生成模态框
lbqssss的博客
03-23 8840
做web应用的时候常常会使用到表格展示数据，还需要对表格中的数据做一些操作，这次工作中正好碰到，也就做了一个整理，方便以后开发直接使用。 前端的表格组件有很多，常说的有jqGrid，datagrid，本文使用的是bootstrap-table，因为考虑到内部使用的后台管理应用使用bootstrap开发前端即可，就想着bootstrap有没有相关的表格组件，就找到了这么个东西。 对表格中的数据进...
Ajax接收到的asp.net return View(model)返回值是整个Html页面
椒盐薄荷糖
03-26 3638
功能需求描述：按条件在表格中进行筛选前台通过&lt;form&gt;提交表单数据到后台，后来需要通过Ajax提交数据到后台，所以为表单绑定了onsubmit="return false”属性，阻止表单提交后的跳转。视图代码如下：&lt;div id="tab_permission" class="tab-pane tab-permission"&gt;     &lt;div class="for...
MVC 控制器弹出提示，并跳回当前页面
我是孤单的飞鸟
09-07 8486
return Content("&lt;script&gt;alert('提示信息');history.go(-1);&lt;/script&gt;");
ASP.NET MVC實現ALERT消息
segclliwf的博客
11-03 433
我們有時希望從后臺傳回來VIEW的信息ALERT出來提醒用戶,當然這種方法較為原始，很多會使用例如Toastr 等去豐富信息提示效果。 例子： 提示賬號已被註冊的消息。 後臺： [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public async Task<ActionResult> Register(RegisterViewModel model) { if (ModelState.IsValid) {
ASP.NET前台AJAX方法调用后台的方法写法
Top_xin的专栏
08-19 4212
前台： //$().ready( // function () { // $("#AjaxDemo").click(function () { // $.ajax({ //
在Asp.net MVC 使用bootstrap 的modal dialog 实现Popup
我的英文站点：https://iorilan.medium.com/
01-31 6445
在Asp.net MVC 使用bootstrap 的modal dialog 实现Popup
bootstrap模态窗口
11-24
Bootstrap模态窗口是一种常见的Web界面设计元素，用于在当前页面上弹出一个对话框，以便用户进行某些操作或查看信息。以下是一个简单的Bootstrap模态窗口的例子： ```html <!-- 模态窗口触发按钮 --> 打开模态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值