时间:2021-05-26
先给大家展示下效果图,效果图如下所示:
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制作弹出层效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
问题:做一个带拖动的弹出层效果(像提示框那种)先写了一半,明天继续奋斗:javascript弹出层居中效果的制作*{padding:0;margin:0;lis
首先给大家展示演示效果:基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好
本文实例为大家分享了jQuery实现弹出层的具体代码,供大家参考,具体内容如下###jQuery实现弹出层效果点击弹出层:弹出弹出层点击阴影:关闭弹出层点击“关
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。效果代码如下:在弹出层中下面是核心
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。效果代码如下在弹出层中下面是核心代