layer.open方法

一、四個按鈕代碼及效果圖

<div class="ibox-content">
    <p>
     <button type="button" class="btn btn-w-m btn-default" id="open_btn_default">默認</button>
     <button type="button" class="btn btn-w-m btn-primary" id="open_btn_primary">頁面層</button>
     <button type="button" class="btn btn-w-m btn-success" id="open_btn_iframe">iframe層</button>
     <button type="button" class="btn btn-w-m btn-info" id="btn_child_frame">getChildFrame</button>
    </p>
</div>

 

 效果圖：

 

 

 

二、每個按鈕點擊后的效果圖和代碼

2.1 默認按鈕

點擊后效果圖：

 

 

代碼：

 <script type="text/javascript"> $("#open_btn_default").on("click", function(){ var index = layer.open({ type: 0,  //可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
                title: ['我是標題', 'font-size:18px; color:orange;'],//數組第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false
                content: 'test', btn: ['確定', '取消'], yes: function(index, layero){ //do something
                    alert("點擊了確定"); layer.close(index); //如果設定了yes回調，需進行手工關閉
 }, btn2: function(index, layero){ alert("點擊了取消"); layer.close(index) } }); }) </script>

2.2 頁面層按鈕

效果圖：

 

 

 代碼：

<script type="text/javascript">
    /* 如果是頁面層 */ $("#open_btn_primary").on("click", function(){ var index = layer.open({ type: 1,  //可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
                title: ['我是標題', 'font-size:18px; color:orange;'],//數組第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false
                area: '500px', content: $('#show_div') }); }) </script>

div代碼：

<div class="row col-sm-12" style="display:none;" id="show_div">
        <form class="form-horizontal m-t" id="commentForm" novalidate="novalidate">
              <div class="form-group">
                  <label class="col-sm-3 control-label">姓名：</label>
                  <div class="col-sm-8">
                      <input id="cname" name="name" minlength="2" type="text" class="form-control" required="" aria-required="true">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-3 control-label">E-mail：</label>
                  <div class="col-sm-8">
                      <input id="cemail" type="email" class="form-control" name="email" required="" aria-required="true">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-3 control-label">網站：</label>
                  <div class="col-sm-8">
                      <input id="curl" type="url" class="form-control" name="url">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-3 control-label">說明：</label>
                  <div class="col-sm-8">
                      <textarea id="ccomment" name="comment" class="form-control" required="" aria-required="true"></textarea>
                  </div>
              </div>
              <div class="form-group">
                  <div class="col-sm-4 col-sm-offset-3">
                      <button class="btn btn-primary" type="submit">提交</button>
                  </div>
              </div>
          </form>
    </div>

2.3 iframe層，點擊后彈出一個頁面，因為最大化了。所以鋪滿了全屏

效果圖：

 

 

 2.4 getChildFrame按鈕，也是彈出來一個頁面，但是可以在子頁面和父頁面間相互傳遞數據，很牛叉！

 

當前頁面效果圖：

 

 

 

 當前頁面代碼：

<script type="text/javascript">
/* 獲取iframe頁的DOM */ $("#btn_child_frame").on("click", function(){ layer.open({ type: 2, closeBtn: 1, title: "驗證表單", area: ['450px','540px'], content: '/manager_test/layer_test/validate_page', success: function(layero, index){ var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();
                    //console.log(body.html()) //得到iframe頁的body內容
                    //console.log("cname:"+body.find('#cname').val());
                    //var p_o = iframeWin.getObj();
                    //console.log("p_o:"+p_o);
                    //layer.full(index);
 } }); }) </script>

主要看上面的代碼中的注解就好