bootstrap-js组件-弹出框

最新推荐文章于 2025-01-28 18:14:00 发布

原创最新推荐文章于 2025-01-28 18:14:00 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #js #modal

bootstrap 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何利用Bootstrap快速搭建一个包含模态框的简单页面，并通过jQuery实现模态框的显示与隐藏功能，同时调整页面背景色以增强用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.1.12.4.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <title>Bootstrap</title>
</head>
<style type="text/css">
    *{
        font-family: 微软雅黑;
    }

</style>
<body>
    <div class="container">
        <h1 class="page-header">BootStrap</h1>
        <button class="btn btn-danger">look</button>
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <span>Detail</span>
                        <span class="close" data-dismiss="modal">&times;</span>
                    </div>
                    <div class="modal-body">
                        <p>this is my picture,do you like it?this is my picture,do you like it?
                        this is my picture,do you like it?this is my picture,do you like it?this is my picture,do you like it?
                        this is my picture,do you like it?this is my picture,do you like it?this is my picture,do you like it?
                        this is my picture,do you like it?</p>
                    </div>
                    <div class="modal-footer">
                        <button class="save btn btn-danger">save</button>
                        <button class="btn btn-primary" data-dismiss="modal">close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    $('button').click(function(){
        $('#myModal').modal('show');
    });

    $('.save').click(function(){
        alert("suceess!");
    });

    // 弹框出现后让背景颜色变色
    $('#myModal').on('shown.bs.modal',function(e){
        $('body').css({'background':'#ccc'});
    })

    // 弹框隐藏后让背景颜色变色
    $('#myModal').on('hidden.bs.modal',function(e){
        $('body').css({'background':'#f40'});
    })
</script>
</html>

这里写图片描述