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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
详解webpack异步加载业务模块
Jun 23 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
如何测量vue应用运行时的性能
Jun 21 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 UTF8 文件的签名问题
2009/10/30 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
Python装饰器基础详解
2016/03/09 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
详解python中eval函数的作用
2019/10/22 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
毕业生的自我鉴定
2013/10/29 职场文书
运动会广播稿20字
2014/02/18 职场文书
产假请假条
2014/04/10 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis