1. 程式人生 > >關於easyUI中彈窗的問題

關於easyUI中彈窗的問題

先上程式碼,再說其中的奧祕!  彈窗應該是啟動最裡面的div或iframe才對,你啟動外面的可能不是你所要的效果 。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>easyui 中iframe巢狀頁面,https://www.cnblogs.com/baiyangyuanzi/p/6625744.html</title>
      <!--要下載easyUI框架,然後加入本檔案中,只要加兩個就可以了-->
      <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.2/themes/default/easyui.css">
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
      <script type="text/javascript">
         
         $(function(){
             <!--s1的點選事件-->
             $('#s1').click(function(){
                    <!--得到s1中的值-->
                    var $t1=$('#s1').html();
                    $("#wind").window({     //注意彈窗的啟動方法是很有講究的,你啟動外層的div,那麼裡層的iframe就變成圖                                       1一樣的了,不好看;
                        title:$t1,    //彈窗的標題
                        width:700,    //寬度
                        height:550,   //高度
                        modal:true    //模態對話方塊
                    });
                });
                $('#s2').click(function(){
                    var $t2=$('#s2').html();
                    $("#wind_1").window({    //注意它啟動的是div之中的iframe框架,所以彈窗內就充滿了這個框架網面的全部內容。好看。
                        title:$t2,
                        width:700,
                        height:550,
                        modal:true
                    });
                });
         });
      </script>
      <style type="text/css">
         #wind{
            display:none;    <!-- 這一句一定要有,是指剛開始時,將彈窗隱藏-->
         }
      </style>
   </head>
   <body>
      <section id="s1">這是一句</section>
      <section id="s2">這是二句</section>
      <div id="wind" title="彈窗">
         <iframe id="wind_1" name="wind_1" src="openW.html"></iframe>
      </div>
   </body>
</html>

注意哦!在同一個頁面中啟動彈窗的時候,你會發現,它居然總是第一次的彈窗值,這個時候,你就要使用一個重新整理的語句。

window.wind_1.location.reload();

圖1

圖2: