最近使用了layui框架，是一套非常好用的整合吧，沒研究太深，但是用起來很方面。主要是因為要寫一個選擇彈出框，類似使用者登入一樣的彈出框。學習肯定是先看官網，下載原始碼的，地址 http://www.layui.com/doc/

 但是官網程式碼的demo不夠詳盡，還是我沒找到。下面是一個點選按鈕彈出選擇框的例子。

一、先看效果：

1.點選三個點的圖示彈出了子頁面：

2.子頁面呼叫父頁面方法，圖一呼叫父頁面方法，圖二得到父頁面var變數。

3.選擇之後，關閉彈框，父頁面得到子頁面單選框選擇的value

二、如果是想到得到這樣的彈出框及父子頁面的引數傳遞。就可以看下面程式碼了。（重要：有個坑，程式碼的除錯一定要藉助伺服器跑起來，web專案的話要用tomcat，最後在瀏覽器除錯的時候一定是ip+埠+專案檔案訪問。我開始的時候就寫了個html網頁，編輯好了檔案，用瀏覽器開啟，死活傳值弄不出來。這個應該是瀏覽器獲取dom物件不一樣吧，有誰知道的話不妨留個言討論一下。

1.要彈出的選擇框area_choice.jsp頁面程式碼：

<div  id="choose" style=" width: 100%;height:80px;text-align:left;">
    <label><input  name="server_area"  type="radio" value="ALL" checked="true"   />全部(all)</label></br>
    <label><input name="server_area"  type="radio" value="HZ"  
 
/>杭州(HZ)</label></br>
    <label><input name="server_area"  type="radio" value="ALHZ"  />阿里杭州(ALHZ)</label></br>
    <label><input name="server_area" type="radio" value="ALQD" />阿里青島(ALQD)</label></br>
    <label><input name="server_area"  
 
type="radio" value="ZP" />(周浦)ZP</label></br>
    <label><input name="server_area"  type="radio" value="ALSZ" />(阿里深圳)ALSZ</label></br>
    <label><input name="server_area"  type="radio" value="ALBJ"/>(阿里北京)ALBJ</label></br>
<input type="button" value="獲取父訊息" onclick="getMess();"> </input>
</div>
<script>
window.getChoseId=function () {
        var value='';
var radio = document.getElementsByName("server_area");
for(var i = 0;i<radio.length;i++)
        {
            if(radio[i].checked==true)
            {value = radio[i].value;
break;}
        }
        return value;
};
function getMess() {
        //呼叫父頁面方法
parent.ToChildren();
alert("獲取父頁引數:"+parent.server_type);
}
</script>

2.父頁面呼叫程式碼：點選按鈕呼叫showd()方法就好。

function showd(){
    var indext=layer.open({
        type: 2,
title: '切換機房',
maxmin: true,
btn: ['確定','取消'],
area: ['220px', '320px'],
content: '../layer/area_choice.jsp',
yes: function (layero, index) {
            var newpsw = window[index.find('iframe')[0]['name']];
var value=newpsw.getChoseId();
parent.layer.close(indext);
alert("父頁面得到子頁面的選擇值："+value);
changeMapArea(value);
} ,
btn2: function () {
            parent.layer.close(indext);
} ,
});
}
function ToChildren() {
    alert("子頁面呼叫父頁面方法");
}

3.核心程式碼就是上面的內容了。這裡注意btn，放了兩個按鈕，yes方法這個回撥函式表示當彈出框點選確定的時候，btn2的function表示點選取消時執行，具體success。end等函式的回撥，請參考官網文件。至於下載的js引入這裡就沒必要嘮叨了。提醒一句要使用jquery 1.8的min.js

4.當網盤用了，原始碼自己留一份。

http://download.csdn.net/download/flybridy/10129608