JavaScript制作弹出层效果


Posted in Javascript onDecember 02, 2016

先给大家展示下效果图,效果图如下所示:

JavaScript制作弹出层效果

1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件;

2.前台代码

<input type="text" id="txt_Type" style="display:none" />
<div class="macFormItem" id="divSQXLH" runat="server">
<label>
售前支持序列号</label>
<div class="FormItemElement">
<input id="txt_SQXLH" class="txt" type="text" style ="width:300px" readonly="readonly" />
<input id="btn_selectSQXLH" type="button" value="选择序列号" style="margin-left: 5px; width: 90px" class="btn" />
</div>
</div>
<%-- 弹出层--%>
<div id="menuContainer" style="position: absolute; background-color: white; border: 1px solid #cccccc; width: 306px; display: none;">
<div style="font-size: 12px;">
 序列号:
<input id="txt_Name" type="text" />
<input id="btn_Search" type="button" style="margin: 10px 10px 10px 10px;" value="搜索" class="btn" />
</div>
<div id="tt">
</div>
<input id="btn_selectOk" type="button" value="确认" style="margin: 10px 10px 10px 10px;" class="btn" />
<input id="btn_selectCancle" type="button" value="关闭" class="btn" />
</div>

3.js 代码

<script type="text/javascript">
//设置层
function getLeft(obj) {
if (obj == undefined) return 0;
if (obj.parentNode == undefined) return obj.offsetLeft;
if (obj.tagName.toLowerCase() == "html") return 0;
return obj.offsetLeft + getLeft(obj.parentNode);
}
function getTop(obj) {
if (obj == undefined) return 0;
if (obj.parentNode == undefined) return obj.offsetTop;
if (obj.tagName.toLowerCase() == "html") return 0;
return obj.offsetTop + getTop(obj.parentNode);
}
// 选择售前序列号
$("#btn_selectSQXLH").click(function () {
$("#menuContainer").css("display", "");
var proName = $("#txt_SQXLH");
$("#menuContainer").css("left", (proName.position() || { "left": NaN }).left);
$("#menuContainer").css("top", (proName.position() || { "top": NaN }).top + proName.height());
$("#txt_Type").val('1');
getCustomerInfo();
});
// 选择项目编号
$("#btn_selectProNum").click(function () {
$("#menuContainer").css("display", "");
var proName = $("#txt_ProNum");
$("#menuContainer").css("left", (proName.position() || { "left": NaN }).left);
$("#menuContainer").css("top", (proName.position() || { "top": NaN }).top + proName.height());
$("#txt_Type").val('2');
getCustomerInfo();
});
// 选择报修编号
$("#btn_selectBXNum").click(function () {
$("#menuContainer").css("display", "");
var proName = $("#txt_BXNum");
$("#menuContainer").css("left", (proName.position() || { "left": NaN }).left);
$("#menuContainer").css("top", (proName.position() || { "top": NaN }).top + proName.height());
$("#txt_Type").val('3');
getCustomerInfo();
});
function getCustomerInfo() {
$('#tt').datagrid({
iconCls: 'icon-edit',
toolbar: "#tb",
pagination: true,
singleSelect: true,
fitColumns: true,
url: "../Admin/Ashx/UpdateProManagerHandler.ashx?Method=GetPageDataByProName", --获取数据信息
columns: [[
{ field: 'FNumber', title: '项目编号', width: 150, align: 'center' },
{ field: 'FName', title: '项目名称', width: 150, align: 'center' }
]],
onLoadError: function (msg) {
alert(window.console.info(msg.responseText));
}
});
}
//查询客户信息
$("#btn_Search").click(function () {
var params = $('#tt').datagrid('options').queryParams;
params.proName = $("#txt_Name").val();
$('#tt').datagrid('load');
});
//确认按钮选择
$("#btn_selectOk").click(function () {
var row = $('#tt').datagrid('getSelected');
if (row) {
Clear();
if ($("#txt_Type").val() == "1")
{
$("#txt_SQXLH").val(row.FName);
$("#txt_CustName").val(row.FName);
$("#txt_SalerEmp").val(row.FName);
}
if ($("#txt_Type").val() == "2")
{
$("#txt_ProNum").val(row.FName);
$("#txt_CustName").val(row.FName);
$("#txt_ProName").val(row.FName);
}
if ($("#txt_Type").val() == "3") {
$("#txt_BXNum").val(row.FName);
$("#txt_CustName").val(row.FName);
}
}
$("#menuContainer").css("display", "none");
});
//datagrid 的双击事件
$('#tt').datagrid({
onDblClickRow: function (rowIndex, rowData) {
Clear();
if (rowData) {
if ($("#txt_Type").val() == "1") {
$("#txt_SQXLH").val(rowData.FName);
$("#txt_CustName").val(rowData.FName);
$("#txt_SalerEmp").val(rowData.FName);
}
if ($("#txt_Type").val() == "2") {
$("#txt_ProNum").val(rowData.FName);
$("#txt_CustName").val(rowData.FName);
$("#txt_ProName").val(rowData.FName);
}
if ($("#txt_Type").val() == "3") {
$("#txt_BXNum").val(rowData.FName);
$("#txt_CustName").val(rowData.FName);
}
}
$("#menuContainer").css("display", "none");
}
});
// 取消
$("#btn_selectCancle").click(function () {
$("#menuContainer").css("display", "none");
});
//清空文本信息
function Clear()
{
$("#txt_SQXLH").val('');
$("#txt_ProNum").val('');
$("#txt_BXNum").val('');
$("#txt_CustName").val('');
$("#txt_SalerEmp").val('');
$("#txt_ProName").val('');
}
</script>

4.选择信息时,可双击 也可单击点确认。

以上所述是小编给大家介绍的JavaScript制作弹出层效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery代码优化 事件委托篇
Nov 01 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
Javascript之面向对象--方法
Dec 02 #Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 #Javascript
Vue.js组件tree实现省市多级联动
Dec 02 #Javascript
Vue2实现组件props双向绑定
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 #Javascript
基于jQuery实现表格的排序
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 #Javascript
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python制作刷网页流量工具
2017/04/23 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
在python中画正态分布图像的实例
2019/07/08 Python
python实现猜拳小游戏
2020/04/05 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
2013英文求职信模板范文
2013/11/15 职场文书
英语感恩演讲稿
2014/01/14 职场文书
英语课外活动总结
2014/08/27 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
单位实习介绍信
2015/05/05 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Java 多态分析
2022/04/26 Java/Android