[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中的内容为字符串就可以了。 

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4847087.html

相关文章
N..
|
10天前
|
开发框架 前端开发 UED
Bootstrap弹出框与警告框
Bootstrap弹出框与警告框
N..
16 0
|
7月前
|
前端开发 JavaScript API
|
7月前
|
资源调度 前端开发 JavaScript
什么是 bootstrap ngb modal window?
什么是 bootstrap ngb modal window?
52 0
|
移动开发 前端开发 JavaScript
Bootstrap 模态框Modal【前端Bootstrap框架】
Bootstrap 模态框Modal【前端Bootstrap框架】
Bootstrap 模态框Modal【前端Bootstrap框架】
|
前端开发 JavaScript 容器
用了BootStrap的modal弹窗,vue-clipboard2虽然复制成功,可是无法粘贴
用了BootStrap的modal弹窗,vue-clipboard2虽然复制成功,可是无法粘贴
252 0
用了BootStrap的modal弹窗,vue-clipboard2虽然复制成功,可是无法粘贴
|
前端开发 开发工具 git
bootstrap weebox,支持ajax的模态弹出框(2)
bootstrap weebox,支持ajax的模态弹出框
125 0
|
前端开发 开发工具 git
bootstrap weebox,支持ajax的模态弹出框(1)
bootstrap weebox,支持ajax的模态弹出框
140 0
bootstrap weebox,支持ajax的模态弹出框(1)
|
前端开发 JavaScript
Bootstrap教程(15)--警告框、弹出框、工具提示框
本文目录 1. 概述 2. 警告框 2.1 普通警告框 2.2 可关闭警告框 3. 弹出框 3.1 弹出框初始化 3.2 弹出框显示 4. 工具提示框 4.1 工具提示框初始化 4.2 工具提示框显示 5. 小结
510 0
Bootstrap教程(15)--警告框、弹出框、工具提示框
|
前端开发 JavaScript
【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分:   关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来   首先呢,得有个Bootstrap的页面,这里就不说了。   其次呢,得有个modal放在页面中,不管你这段代码加在页面代码的什么地方,默认是不会显示出来的  ...
1993 0

热门文章

最新文章