JavaScript制作彈出層效果
更新時(shí)間：2016年12月02日 13:39:42 作者：老姐不老
彈出層效果大家在網(wǎng)站上經(jīng)常遇到此功能，下面小編給大家分享一段js代碼制作彈出層效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下吧
先給大家展示下效果圖，效果圖如下所示：
1.引用相關(guān)easyui.min.js，easyui-lang-zh_CN.js 等js 文件；
2.前臺(tái)代碼
<input type="text" id="txt_Type" style="display:none" /> <div class="macFormItem" id="divSQXLH" runat="server"> <label> 售前支持序列號(hào)</label> <div class="FormItemElement"> <input id="txt_SQXLH" class="txt" type="text" style ="width:300px" readonly="readonly" /> <input id="btn_selectSQXLH" type="button" value="選擇序列號(hào)" 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;"> 序列號(hào): <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="確認(rèn)" style="margin: 10px 10px 10px 10px;" class="btn" /> <input id="btn_selectCancle" type="button" value="關(guān)閉" class="btn" /> </div>
3.js 代碼
<script type="text/javascript">
//設(shè)置層
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);
}
// 選擇售前序列號(hào)
$("#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();
});
// 選擇項(xiàng)目編號(hào)
$("#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();
});
// 選擇報(bào)修編號(hào)
$("#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", --獲取數(shù)據(jù)信息
columns: [[
{ field: 'FNumber', title: '項(xiàng)目編號(hào)', width: 150, align: 'center' },
{ field: 'FName', title: '項(xiàng)目名稱', 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');
});
//確認(rèn)按鈕選擇
$("#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.選擇信息時(shí)，可雙擊 也可單擊點(diǎn)確認(rèn)。
以上所述是小編給大家介紹的JavaScript制作彈出層效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js 面向?qū)ο笾R(shí)是最基礎(chǔ)的入門(mén)知識(shí)點(diǎn)，下面通過(guò)本文實(shí)例代碼給大家詳細(xì)介紹js 面向?qū)ο蟮闹R(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)下拉菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
由于業(yè)務(wù)需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關(guān)于如何只用echarts做個(gè)仿3d地圖功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇使用Layui搭建后臺(tái)管理界面的操作方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要為大家介紹了微信小程序tabBar自定義彈窗遮擋不住解決技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了js 閉包,結(jié)合實(shí)例形式深入分析了JS閉包的概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript獲得頁(yè)面base標(biāo)簽中url的方法
這篇文章主要介紹了JavaScript獲得頁(yè)面base標(biāo)簽中url的方法,涉及javascript中元素的獲取及href屬性的使用技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS函數(shù)基本定義與用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)基本定義、參數(shù)、返回值等相關(guān)使用技巧,需要的朋友可以參考下2020-01-01
js實(shí)現(xiàn)九宮格圖片半透明漸顯特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)九宮格圖片半透明漸顯特效的方法,涉及js操作css特效的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法
這篇文章主要介紹了js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法,涉及javascript中DOM操作的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04