js 弹出div 输入框，并返回输入框的值给父页面

最新推荐文章于 2024-05-10 09:56:17 发布

转载最新推荐文章于 2024-05-10 09:56:17 发布 · 720 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2425942/blog/847104

文章标签：

#javascript #python #ViewUI

本文介绍了一个使用HTML、CSS及JavaScript实现的弹窗组件。该组件可通过调整位置使其居中显示，并提供了确定与关闭按钮来反馈用户的操作。文章还包含了实现这一功能所需的样式设置和脚本逻辑。

2019独角兽企业重金招聘Python工程师标准>>>

div

<div class="pop-box" style="width: 500px" id="pop-div">
       <table class="style1">
           <tr>
               <td class="style2">不通过原因：</td>
               <td><textarea id="result" rows="4" cols="56"></textarea></td>
           </tr>

function popupDiv(div_id) {
var div_obj = $("#" + div_id);
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = div_obj.height();
var popupWidth = div_obj.width();
div_obj.css({ "position": "absolute" }).animate({ left: windowWidth / 2 - popupWidth / 2,
top: windowHeight / 2 - popupHeight / 2, opacity: "show"}, "show");

}

function hideDiv(div_id) {
//checkData('0');
$("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow"); //关闭弹出的DIV

}

css:

/* div pop window*/
.pop-box
{
z-index: 9999;
margin-bottom: fd3px;
display: none;
position: absolute;
background: #ffffff;
border: solid 1px #6e8bde;
}
.pop-box h4
{
color: #ffffff;
cursor: default;
height: 18px;
font-size: 14px;
font-weight: bold;
text-align: left;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 2px;
}
.pop-box-body
{
clear: both;
margin: 4px;
padding: 2px;
}
.style1
{
width: 98%;
}
.style2
{
width: 80px;
}