jquery 点击弹出对话框显示隐藏遮罩层
程序员文章站
2022-05-31 19:02:01
...
描述
点击输入框,弹出修改内容框和遮罩层,进行修改,点击确定按钮,将修改的内容更新到输入框中,点击取消按钮,关闭对话框和遮罩层。
CSS
<style>
*{
padding: 0;
margin: 0;
}
:focus{
outline: 0;
}
.content {
margin-left: 400px;
margin-top: 200px;
height: 100px;
line-height: 90px;
/*text-align: center;*/
}
.textarea {
vertical-align: middle;
}
.miss {
width: 400px;
height: 390px;
margin: 0 auto;
background-color: #fff;
top: 120px;
left: 0;
right: 0;
bottom: 0;
border: 1px #ccc solid;
position: absolute;
z-index: 999;
}
.miss h4 {
height: 40px;
line-height: 40px;
background-color: #F8F8F8;
margin-bottom: 15px;
font-weight: 200;
font-family: '微软雅黑';
padding-left: 15px;
}
.srk {
height: 280px;
width: 370px;
margin-left: 15px;
}
#textarea {
height: 280px;
width: 100%;
}
.anz {
width: 370px;
margin: 0 auto;
text-align: center;
margin-top: 15px
}
.anz button {
width: 80px;
height: 30px;
border: none;
color: #fff;
cursor: pointer;
}
.qued {
background-color: #34A8FF;
}
.qux {
background-color: #FF6838;
}
.shadow {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 900;
background-color: #000;
opacity: 0.6;
display: none;
}
</style>
HTML
<!-- 输入框 -->
<div class="content">
请输入内容:<textarea class="textarea"></textarea>
</div>
<!-- 修改框 -->
<div class="miss" style="display: none;">
<h4>修改内容</h4>
<div class="srk">
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
</div>
<div class="anz">
<button class="qued">确定</button>
<button class="qux">取消</button>
</div>
</div>
<!-- 遮罩层 -->
<div class="shadow"></div>
JS
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击输入框,弹出修改对话框和遮罩层,并将输入框的内容复制到修改框中。
$('.textarea').click(function(){
$('.miss').show(400);
$('.shadow').css('display','block');
var textarea1=$('.textarea').val();
$('#textarea').val(textarea1);
})
//点击取消按钮,关闭修改对话框和遮罩层。
$('.qux').click(function(){
$('.miss').hide(400);
$('.shadow').css('display','none');
})
//点击确定按钮,关闭修改对话框和遮罩层,并将修改框的内容复制到输入框中。
$('.qued').click(function(){
$('.miss').hide(400);
var textarea2=$('#textarea').val();
$('.textarea').val(textarea2);
$('.shadow').css('display','none');
})
});
</script>
效果如下:
上一篇: Qt之点击PushButton弹出对话框
下一篇: HTML点击按钮弹出对话框(仅代码)
推荐阅读
-
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
-
jquery 点击弹出对话框显示隐藏遮罩层
-
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能实例分享
-
JQuery弹出层,实现弹层切换,可显示可隐藏。_html/css_WEB-ITnose
-
父页面显示遮罩层弹出半透明状态的dialog_jquery
-
JQuery弹出层,实现弹层切换,可显示可隐藏。_html/css_WEB-ITnose
-
css遮罩--点击非弹出层隐藏弹出层
-
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法_jquery
-
Jquery 点击按钮显示和隐藏层的代码_jquery
-
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例