JavaScript制作弹出层效果

先给大家展示下效果图，效果图如下所示：

1.引用相关easyui.min.js，easyui-lang-zh_CN.js等射流研究…文件；

2.前台代码

输入类型=' text ' id=' txt _ Type ' style=' display : none '/div class=' macFormItem ' id=' divSQXLH ' runat=' server '标签售前支持序列号/label div class=' formitemment '输入id=' txt _ SQXLH ' class=' txt ' type=' text ' style=' width :300 px ' readonly=' readonly '/输入id=' BTN _ selectSQXLH ' type=' button ' value='选择序列号style=' margin-left : 5px；宽度： 90px ' class=' BTN '/div/div %-弹出层-% div id=' MenuContainer ' style=' position : absolute；背景-颜色：白色；border: 1px固体# cccccc宽度： 306 px显示器：无div style=' font-size : 12px'序列号：输入id=' txt _ Name '类型=' text '/输入id=' BTN _ Search '类型=' button '样式=' margin : 10px 10px'值='搜索' class=' BTN '/div div id=' TT '/divinput id=' BTN _ selectOk ' type=' button ' value='确认style=' margin : 10px 10px 10px；10px ' class=' BTN '/输入id=' BTN _ select cancel ' type=' button ' value='关闭' BTN '/3区。射流研究…代码

脚本类型='text/javascript'//设置层函数getLeft(obj) {if (obj==undefined)返回0;if (obj.parentNode==未定义)返回obj . offsetleftf(obj。标记名。tolowercase()==' html ')返回0;返回物体。offsetleft getLeft(obj。父节点)；}函数getTop(obj) {if (obj==undefined)返回0;if (obj.parentNode==未定义)返回obj.offsetTopif(obj。标记名。tolowercase()==' html ')返回0;返回物体。offsettop getTop(obj。父节点)；}//选择售前序列号$('#btn_selectSQXLH ').单击(函数(){$('#menuContainer ')).css('display '，' ')；var ProName=$(' # txt _ SQXLH ')；$('#menuContainer ').css('left '，(ProName。position()| | { ' left ' : NAn }).左);$('#menuContainer ').css('top '，(ProName。position()| | { ' top ' : NAn }).top ProName。高度())；$('#txt_Type ').val(' 1 ')；getCustomerInfo()；});//选择项目编号$('#btn_selectProNum ').单击(函数(){$('#menuContainer ')).css('display '，' ')；var ProName=$(' # txt _ ProNum ')；$('#menuContainer ').css('left '，(ProName。position()| | { ' left ' : NAn }).左);$('#menuContainer ').css('top '，(ProName。position()| | { ' top ' : NAn }).top ProName。高度())；$('#txt_Type ').val(' 2 ')；getCustomerInfo()；});//选择报修编号$('#btn_selectBXNum ').单击(函数(){$('#menuContainer ')).css('display '，' ')；var ProName=$(' # txt _ bxNum ')；$('#menuContainer ').css('left '，(ProName。position()| | { ' left ' : NAn }).左);$('#menuContainer ').css('top '，(ProName。position()| | { ' top ' : NAn }).top ProName。高度())；$('#txt_Type ').val(' 3 ')；getCustomerInfo()；});函数getCustomerInfo() {$('#tt ').数据网格({ iconcl s : ' icon-edit '，toolbar: '#tb '，分页： true，singleSelect: true，fitColumns: true，url: './Admin/Ashk/updatepromanagerhandler。Ashx？Method=GetPageDataByProName '，-获取数据信息列： [{ field : ' fnnumber '，title: '项目编号，宽度： 150,对齐： '中心}，{ field: 'FName '，title: '项目名称，width: 150，align: 'center' }]，onloaderror :函数(msg){ alert(window。控制台。信息(消息。response text))；}});}//查询客户信息$('#btn_Search ').单击(函数(){var params=$('#tt ').datagrid(')选项')。queryparamsparams . proname=$(' # txt _ Name ').val()；$('#tt ').datagrid(' load ')；});//确认按钮选择$('#btn_selectOk ').单击(函数(){var row=$('#tt ').数据网格(' GetSelected ')；if(row){ Clear()；if ($('#txt_Type ').val()=='1'){$('#txt_SQXLH ').val(行. FName)；$('#txt_CustName ').val(行. FName)；$('#txt_SalerEmp ').val(行. FName)；}if ($('#txt_Type ').val()=='2'){$('#txt_ProNum ').val(行. FName)；$('#txt_CustName ').val(行. FName)；$('#txt_ProName ').val(行. FName)；}if ($('#txt_Type ').val()=='3') {$('#txt_BXNum ').val(行. FName)；$('#txt_CustName ').val(行. FName)；}}$('#menuContainer ').css('display '，' none ')；});//数据网格的双击事件$('#tt ').数据网格({onDblClickRow:函数(行索引，行数据){ Clear()；if (rowData) {if ($('#txt_Type ')).val()=='1') {$('#txt_SQXLH ').val(行数据. FName)；$('#txt_CustName ').val(行数据. FName)；$('#txt_SalerEmp ').val(行数据. FName)；}if ($('#txt_Type ').val()=='2') {$('#txt_ProNum ').val(行数据. FName)；$('#txt_CustName ').val(行数据. FName)；$('#txt_ProName ').val(行数据. FName)；}if ($('#txt_Type ').val()=='3') {$('#txt_BXNum ').val(行数据. FName)；$('#txt_CustName ').val(行数据. FName)；}}$('#menuContainer ').css('display '，' none ')；}});//取消$('#btn_selectCancle ').单击(函数(){$('#menuContainer ')).css('display '，' none ')；});//清空文本信息函数Clear(){$('#txt_SQXLH ').val(" ")；$('#txt_ProNum ').val(" ")；$('#txt_BXNum ').val(" ")；$('#txt_CustName ').val(" ")；$('#txt_SalerEmp ').val(" ")；$('#txt_ProName ').val(" ")；}/script4 .选择信息时，可双击也可单击点确认。

以上所述是小编给大家介绍的Java脚本语言制作弹出层效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！