1. 程式人生 > >layer彈出層顯示在top頂層

layer彈出層顯示在top頂層

http://blog.csdn.net/yjb7268888/article/details/53390466

(一)因為專案框架用了iframe,所以在用layer時,預設layer.open彈出的視窗只能在iframe子視窗區域顯示。現在想讓layer在父視窗或者說框架的最頂層顯示,想到用top.layer.open或者parent.layer.open,但是沒反應。後面想到應該是在父頁面中沒有匯入layer.js檔案,匯入後就能正常顯示在父視窗頁面區域了。

顯示在頂層視窗

  1. top.layer.open({  
  2.               type: 2,  
  3.               title: '標題',  
  4.               shadeClose: true,  
  5.               shade: 0.3,  
  6.               area : ['850px' , '450px'],  
  7.               <spanstyle="color: rgb(51, 51, 51); font-family: 'Courier New'; line-height: 20px; white-space: pre-wrap;">content: 'http://sentsin.com' //這裡content是一個URL,</span>
  8.             });   

顯示在父視窗
  1. parent.layer.open({  
  2.               type: 2,  
  3.               title: '標題',  
  4.               shadeClose: true,  
  5.               shade: 0.3,  
  6.               area : ['850px' , '450px'],  
  7.               <spanstyle="font-family: 'Courier New'; white-space: pre-wrap;">content: 'http://sentsin.com' //這裡content是一個URL,
    </span>
  8.             });   
top和parent是瀏覽器的內建物件,top表示最頂層容器,parent表示父容器,這樣一來就是實現了iframe控制父頁面或者頂層頁面的彈窗效果了。

http://blog.csdn.net/zhu_nana/article/details/49902383

(二) layer 是一款使用非常方便且功能強健的 jQuery 彈出層外掛,對各類瀏覽器中的相容性也很好。使用它可以創建出互動體驗更好的 Web 應用程式。

layer 的維護人員是一群和小G年齡相仿,富有激情的前端開發人員,所以大家不用擔心它的升級問題。

layer 彈出iframe 層

$.layer({
  type: 2,
     title: '裝置詳細',
     shadeClose: true,//點選遮罩關閉層
     shade: 0.8,
     area: ['90%', '90%'],
     //content: 'http://www.baidu.com/' //iframe的url
     iframe: {
      src:‘http://baidu.com’

     }
 });

layer 提供了資訊框、詢問框、頁面層、iframe 和 tips 等多種展示方式,具體使用方式請參見官網的示例和API。