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 相关文章推荐
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
javascript的BOM汇总
Jul 16 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
iview实现图片上传功能
2020/06/29 Javascript
Python入门篇之函数
2014/10/20 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python贪心算法实例小结
2018/04/22 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python实现飞机大战小游戏
2019/11/08 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
出国考察邀请函
2014/01/21 职场文书
餐饮投资计划书
2014/04/25 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
返乡农民工证明
2015/06/24 职场文书