JavaScript制作彈出層效果

更新時間：2016年12月02日 13:39:42 作者：老姐不老

彈出層效果大家在網站上經常遇到此功能，下面小編給大家分享一段js代碼制作彈出層效果，代碼簡單易懂，非常不錯，需要的朋友參考下吧

先給大家展示下效果圖，效果圖如下所示：

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;">
&nbsp;序列號:
<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制作彈出層效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

js
彈出層

用JS操作FRAME中的IFRAME及其內容的實現代碼
一直都需要這樣的東西，發(fā)現了這個好東西，一定要研究下
2008-07-07
JavaScript 函數惰性載入的實現及其優(yōu)點介紹
惰性載入表示函數執(zhí)行的分支只會在函數第一次掉用的時候執(zhí)行，在第一次調用過程中，該函數會被覆蓋為另一個按照合適方式執(zhí)行的函數，這樣任何對原函數的調用就不用再經過執(zhí)行的分支了
2013-08-08
HTML DOM的nodeType值介紹
將HTML DOM中幾個容易常用的屬性做下記錄，需要的朋友可以參考下。
2011-03-03
javascript實現的仿51job地址多項選擇方式效果
分享一個類似51job方式的地址選擇效果
2009-12-12
微信小程序實現蒙版彈出窗功能
這篇文章主要介紹了微信小程序實現蒙版彈出窗功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
微信小程序實現簡易計算器
這篇文章主要為大家詳細介紹了微信小程序實現簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
詳解Web使用webpack構建前端項目
本篇文章主要介紹了詳解Web使用webpack構建前端項目，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
JS樹形菜單組件Bootstrap TreeView使用方法詳解
這篇文章主要為大家詳細介紹了js組件Bootstrap TreeView使用方法，本文一部分針對于bootstrap的treeview的實踐，另一部分是介紹自己寫的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
bootstrap modal+gridview實現彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實現彈出框效果，gridview點擊更新彈出填寫信息表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
javascript中this做事件參數相關問題解答
有關this想必大家早有所耳聞，只不過在使用中不是那么在意而已，接下來為大家介紹下this做事件參數問題，感興趣的你可不要錯過了哈
2013-03-03