美文网首页
前端学习-jQuery实现模态框

前端学习-jQuery实现模态框

作者: 写给朕阅 | 来源:发表于2018-08-28 19:36 被阅读0次

需求:当点击按钮计算器时,在窗口中间弹出模态框,可以计算,点击x关闭模态框
效果图:

QQ截图20180828192630.jpg
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq实现简易计算器</title>
    <style type="text/css">
        *{
            margin: 0; padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box{
            /*父盒子属性*/
            width: 100%;
            height: 100%;
            position: relative;
        }
        .wraper{
            /*模态框属性:居中*/
            width: 400px;
            height: 200px;
            border: 1px solid blue;
            background-color: #fff;

            /*实现盒子居中效果*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -220px;
            text-align: center;
            display: none;
        }

       .sep{
            /*关闭框样式*/
            position: absolute;
            top: 1px;
            right: 1px;
            width:30px;
            height: 30px;
            line-height: 30px;
            background-color: red;
            color: #fff;
        }
        .containe{
            width: 100%;
            height:168px;
            border-top: 1px solid #666;
            line-height: 168px;
        }
        .containe .input_w{
            width: 80px;
            height: 35px;
        }
        .containe .btn_w{
            width:35px;
            height: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="btn_cal">计算器</button>
        <div class="wraper">
            <h2>简易计算器</h2>
            <div class="containe">
                <input class="input_w Of_num" type="text" name="first_num">
                <select class="btn_w">
                    <option value ="add">+</option>
                    <option value="subtract">-</option>
                    <option value="multiplication" selected="">*</option>
                    <option value="division">/</option>
                </select>
                <input class="input_w Se_num" type="text" name="second_num">
                <button class="btn_w">=</button>
                <input class="input_w" type="text" name="my_sum">
            </div>
            <!-- 绝对定位脱离标准流可设宽高 -->
            <span class="sep">&times;</span>
        </div>
    </div>
</body>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //实现点击计算机按钮跳出模态框,点击X关闭模态框
            $('.btn_cal').click(function (event) {
                event.stopPropagation();  // 先阻止默认事件和冒泡事件
                $(this).hide();  // 隐藏按钮
                $('.box').css('backgroundColor', 'rgba(0,0,0,0.3)'); //改变窗口背景色
                $('.wraper').slideDown(1000); // 滑出
            });

            $('.wraper .sep').click(function () {
                $('.btn_cal').show();
                $('.box').css('backgroundColor', '#fff');
                $('.wraper').hide();  // 关闭模态框
            });

            // 实现计算器功能
            $('.containe > button').on('click',(function(event) {
                //监听按钮等号事件,事件委托
                var Of_num = Number($('.Of_num').val())   //获取第一个input值
                var Se_num = Number($('.Se_num').val())
                var Select = $('.containe > select').val()  // 获取选中的运算符
                switch (Select) {
                    case 'add':
                        $('input[name=my_sum]').val(Of_num + Se_num)
                        break;
                    case 'subtract':
                        $('input[name=my_sum]').val(Of_num - Se_num)
                        break;
                    case 'multiplication':
                        $('input[name=my_sum]').val(Of_num * Se_num)
                        break;
                    case 'division':
                        $('input[name=my_sum]').val(Of_num / Se_num)
                        break;
                    default:
                        alert('输入错误!')
                        break;
                }
            })
            )
        })
    </script>
</html>

知识点总结:
1、常用html标签的属性使用,div,span,input,select;
2、如何阻止事件流之冒泡事件:event.stopPropagation();
3、定位:父相子绝,脱离标准流,可设宽高,点位盒子居中显示left:50%,margin-left:-50%宽度;
4、jq之Dom操作,$().on() 事件委托;

相关文章

  • 前端学习-jQuery实现模态框

    需求:当点击按钮计算器时,在窗口中间弹出模态框,可以计算,点击x关闭模态框效果图: 知识点总结:1、常用html标...

  • 进阶任务10-事件应用

    实现Tab切换的功能 实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • bootstrap利用模态框自制loading

    bootstrap是一个前端构建ui框架,常用来跟jquery一起搭建简单前端,但是官方教程中只有模态框的例子,并...

  • Bootstrap 模态框多次显示后台会提交多次BUG

    模态框 Bootstrap Modal Bootstrap 的模态框使用 Bootstrap 的前端应该都接触过。...

  • 理解Bootstrap模态框

    在本教程中,我们将讨论十分有用的 Bootstrap jQuery插件——模态框。 Bootstrap 模态框是一...

  • 事件的应用

    1. 实现如下图Tab切换的功能 2. 实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • 进阶任务10

    1.实现如下图Tab切换的功能 2.实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • 事件的应用

    1.实现如下图Tab切换的功能: 2.实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域模态框隐藏

  • 事件的应用

    题目1: 实现如下图Tab切换的功能 地址 题目2:实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外...

  • 进阶任务10(主线任务):事件的应用

    题目1: 实现如下图Tab切换的功能 题目2:实现下图的模态框功能,点击模态框不隐藏,点击关闭以及模态框以外的区域...

网友评论

      本文标题:前端学习-jQuery实现模态框

      本文链接:https://www.haomeiwen.com/subject/ojnqwftx.html