JavaScript制作弹出层效果

前端之家收集整理的这篇文章主要介绍了JavaScript制作弹出层效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

2.前台代码

3.js 代码

获取数据信息 columns: [[ { field: 'FNumber',title: '项目编号',width: 150,align: 'center' },{ field: 'FName',title: '项目名称',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(''); }

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

以上所述是小编给大家介绍的JavaScript制作弹出层效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/43939.html

猜你在找的JavaScript相关文章