[Bootstrap]modal弹出框

写在前面

在实际开发中，为了友好，更需要一种美观的弹出框，js原生的alert，很难满足需求。这里推荐一个bootstrap的弹出框。

一个例子

先看效果吧

代码：

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模式弹出框</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link href="Css/bootstrap.min.css" rel="stylesheet" />
    <script src="JS/jquery.js"></script>
    <script src="JS/bootstrap.min.js"></script>
    <script>

    </script>
    <style>
        .blue {
            background-color: #0094ff;
        }

        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="button" data-target="#loginModal" data-toggle="modal" name="name" class="form-control  bt-red" value="登录" />
    <!-- modal -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header blue">
                    登录
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="请输入用户名" name="name" />
                    <input type="password" class="form-control" placeholder="请输入密码" value="新建文件夹" name="name" />
                </div>
                <div class="modal-footer">
                    <div class="form-control text-center">登录</div>
                    <div class="form-control text-center" data-dismiss="modal"><div class="button"></div>取消</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
复制代码

注意

data-target属性，指向了model的id，所以点击按钮，model就会弹出来了。

用js也可以来控制

复制代码
<script>
    $("#btnLogin").click(function () {
        //显示
        $("#loginModal").modal("show");
        //隐藏
        $('#loginModal').modal('hide');
        //切换
        $('#myModal').modal('toogle');
    });
</script>
复制代码

 总结

之所以推荐这个弹出框，是因为这个操作更方便，因为在项目中用到bootstrap，这样也不需要再去添加其他的引用了。如果用来作为提示框，可以修改modal-body中的内容为字符串就可以了。 

posted @   wolfy  阅读(5512)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
历史上的今天：
2014-09-29 [Lync]lync同步通讯簿
2013-09-29 FileStream大文件复制
点击右上角即可分享
微信分享提示
SQL AI 助手