自定义弹窗
程序员文章站
2022-05-11 21:05:36
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>可拖动的弹出框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="http://nyjnh.4006000949.com/css/popDrag.css" rel="stylesheet" type="text/css" />
<script src="http://nyjnh.4006000949.com/js/jquery.min.js"></script>
<script src="http://nyjnh.4006000949.com/js/PopDrag.js" type="text/javascript"></script>
</head>
<body>
<input id="btn" type="button" value="审核不通过" style="margin-top: 30px;">
<!-- 自定义弹出框 -->
<div id="textPopBox" class="popBox" >
<h3 class="popBoxHandle">审核不通过</h3>
<form action="" method="post">
<table width="100%" cellspacing="5">
<tr>
<td width="120" align="right">
<label>项 目 名 称：</label>
</td>
<td align="left"> <span name="project_name">项目1</span></td>
</tr>
<tr>
<td width="120" align="right"><label>是否填写原因：</label></td>
<td align="left">
<input type="radio" name="hasReason" value="true" onclick="openText(this); return true;" /><label>是</label>
<input type="radio" name="hasReason" value="false" onclick="openText(this); return true;" checked="checked" /><label>否</label>
</td>
</tr>
<tr id="reasonText" style="display:none;">
<td width="120" align="right"><label>请输入审核 <br />不通过的原因：</label></td>
<td align="left"><textarea style="width:320px;height:100px;" id="backReason" name="backReason"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<br />
<input id='ok' type="button" class="button green" value=" 确 认 " />
<input id='cancel' type="button" class="button blue" value=" 取 消 " />
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//初始化弹出框
var p = new PopUp({
//isScroll:'disabled'
//enableDrag:'disabled'
//enableShadow:'disabled'
//id为你自己自定义的弹出框div的id
id: "textPopBox"
});
//缩放窗口时重新定位弹出框及遮罩层的宽度和高度
EventUtil.addEvent(window, 'resize', function () {
p.setPosition();
//如果开启遮罩层，遮罩层元素存在，则重新定位遮罩层
p.enableShadow && p.enableShadow.shadow && p.enableShadow.setProperty(p.enableShadow.shadow);
});
EventUtil.addEvent(EventUtil._$('btn'), 'click', function () {
p.show({//定义坐标，如果缺省则居中显示
// x:100,
// y:100
});
});
EventUtil.addEvent(EventUtil._$('ok'), 'click', function () {
//自定义点击确定按钮之后得操作
var t = $("#backReason").val();
alert(t);
//隐藏弹出框
p.hide();
});
EventUtil.addEvent(EventUtil._$('cancel'), 'click', function () {
//自定义点击取消按钮之后得操作
//隐藏弹出框
p.hide();
});
//当按下ESC键时关闭弹出框
// EventUtil.addEvent(document,'keyup',function(e) {
// e = e || window.event;
// e.keyCode == 27 && p.hide();
// });
EventUtil.addEvent(window, 'load', function () {
if ((isIE6 || isOpera) && p.isScroll != null && p.isScroll == 'enabled') {
EventUtil.addEvent(window, 'scroll', function () {
setTimeout(function () {
p.setPosition();
}, 100);
});
}
});
//单选按钮的点击切换事件
function openText(self) {
var value = $(self).val();
if ("true" == value) {
$('#reasonText').css("display", "");
} else {
$('#reasonText').css("display", "none");
}
}
</script>
</body>
</html> 上一篇： 爱普生打印机怎么尽量省墨水?
下一篇： Evo严苛认证的意义何在！