彈出層layer 完整步驟以及在編寫彈出層時遇到的錯誤

創奇發表於2019-05-16

實現的功能：

首先第一步

　　在官方下載layer的檔案。layUI官網：http://layer.layui.com/     http://layer.layui.com/

　　layer檔案的下載步驟如下：

 

然後將完整的layer檔案複製在你當前的專案。如下：

引入jquery.js和layer.js，注意：jQuery.js必須在layer.js前面而且jquery.js必須是1.8版本或者以上的

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>      //我的jquery.js不是專案內的
<script type="text/javascript" src="<%=path %>/layer/layer.js"></script>

假如你的瀏覽器的控制檯出現：

layer.js:2 Uncaught TypeError: i is not a function
at Object.o.run (layer.js:2)
at layer.js:2
at layer.js:2
at layer.js:2

 

leaveExamine_list.jsp:92 Uncaught TypeError: layer.open is not a function
at Eject (XXX.jsp:92)
at HTMLButtonElement.onclick

 

Uncaught SyntaxError: Invalid or unexpected token

 

XXX.jsp:65 Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (leaveExamine_list.jsp:65)
onclick @ leaveExamine_list.jsp:65

說明內的jquery.js不是1.8版本或者以上的，或者是在layer.js的後面，或者是你觸發按鈕的js方法和layer的js檔案或者css檔案有重名；

按鈕彈出層程式碼：

<button id ="test" class="button border-main" type="button" onclick = "Eject()">預覽</button>

js的方法：

 1 function Eject() {
 2         layer.open({
 3         type: 2,
 4          title: '請假詳情',
 5         shadeClose: true,
 6         shade: 0.8,
 7         area: ['60%', '90%'],   //寬高
 8         ontent: 'leave_preview1.jsp?leaveID=  <%=leaveID%>' //iframe的url
 9         }); 
10 }

 

 

相關文章