[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 @ 2015-09-29 19:17  wolfy  阅读(5502)  评论(0)  编辑  收藏  举报