前端学习-jQuery实现模态框
2018-08-28 本文已影响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">×</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() 事件委托；
