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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
浅析vue数据绑定
Jan 17 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
详解VueJs前后端分离跨域问题
May 24 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JS合并两个数组的3种方法详解
Oct 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
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python中turtle库的使用实例
2019/09/09 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
关于读书的演讲稿400字
2014/08/27 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python Django模型详解
2021/10/05 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
MySQL分区以及建索引的方法总结
2022/04/13 MySQL