Browse Source

connect iframe

huaisian 2 years ago
parent
commit
2f1798dc9d
2 changed files with 26 additions and 8 deletions
  1. 16 7
      iframe.html
  2. 10 1
      index.html

+ 16 - 7
iframe.html

@@ -753,16 +753,13 @@ div.div_info ul li.location_title {
 
     </style>
   </head>
-  <body>
-    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-      Launch demo modal
-    </button>
-    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <body style="background-color: transparent;">
+    <div class="modal fade show" id="exampleModal" style="display: block;background-color: rgba(67, 53, 60, 0.459);" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content">
           <button type="button" class="btn-dismiss" data-bs-dismiss="modal" aria-label="Close">X</button>
           <div class="modal-body">
-            <div class="entry-content hometv_area">
+            <div class="entry-content hometv_area" id="hometv_area">
               <div id="div_info" class="div_info">
                 <font size="5" color="522C03">中華電信MOD 全省CH266 皆可收看GSTV幸福空間居家台</font>
                 <ul class="hometv_ul_title">
@@ -782,7 +779,7 @@ div.div_info ul li.location_title {
                 <ul><li class="system">凱擘-振道有線<li class="ch">CH125</li><li class="location">新竹:新竹市</li></ul>
                 <ul><li class="system">凱擘-豐盟有線<li class="ch">CH125</li><li class="location">台中:豐原區、東勢區、后里區、神岡區、潭子區、大雅區、新社區、石岡區、外埔區、和平區</li></ul>
                 <ul><li class="system">凱擘-新頻道<li class="ch">CH125</li><li class="location">彰化:和美鎮、鹿港鎮、秀水鄉、芬園鄉、線西鄉、伸港鄉、花壇鄉、福興鄉、彰化市、埔鹽鄉、大村鄉</li></ul>
-                <ul><li class="system">凱擘-南天有線<li class="ch">CH125</li><li class="location">台南:新營區、鹽水區、下營區、柳營區、後壁區、白河區、東山區、六甲區、官田區、佳里區、麻豆區、西港區、七股區、將軍區、北門區、學甲區</li></ul>
+                <ul style="height: 120px; max-height: 120px !important;"><li class="system">凱擘-南天有線<li class="ch">CH125</li><li class="location">台南:新營區、鹽水區、下營區、柳營區、後壁區、白河區、東山區、六甲區、官田區、佳里區、麻豆區、西港區、七股區、將軍區、北門區、學甲區</li></ul>
                 <ul><li class="system">凱擘-觀昇<li class="ch">CH125</li><li class="location">屏東:長治鄉、鹽埔鄉、高樹鄉、九如鄉、霧台鄉、萬丹鄉、里港鄉、麟洛鄉、瑪家鄉、新園鄉、三地門鄉、內埔鄉、泰武鄉、屏東市</li></ul>
                 <ul style="height: 120px; max-height: 120px !important;"><li class="system">凱擘-屏南</li><li class="ch">CH125</li><li class="location" style="height: 140px;">
                   屏東:潮州鎮、恆春鎮、獅子鄉、萬巒鄉、牡丹鄉、春日鄉、佳冬鄉、枋山鄉、南州鄉、崁頂鄉、滿州鄉、來義鄉、東港鎮、竹田鄉、枋寮鄉、林邊鄉、車城鄉、琉球鄉、新埤鄉
@@ -840,5 +837,17 @@ div.div_info ul li.location_title {
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script>
+      document.getElementByIdx_x=function(id){
+        return document.getElementById(id);
+      }
+      $('.btn-dismiss').click(function () {
+        $('.modal').css('display', 'none');
+        $('.modal').removeClass('show');
+        $('.modal').css('backgroundColor', 'transparent');
+        $('body').css('display', 'none');     	
+        parent.window.document.getElementById("main").style.display = 'none';
+      })
+    </script>
   </body>
 </html>

+ 10 - 1
index.html

@@ -1278,7 +1278,8 @@
                 </div>
             </div>
             <div class="container-fluid bottom-box">
-              <!-- <iframe name="main" src='iframe.html' frameborder="0" scrolling="no"></iframe> -->
+              <!-- <button type="button" class="test-ifr bg-white mx-0 my-4 hidden-sm-and-down font-weight-bold width-130 v-btn v-btn--depressed theme--light secondary secondary--text"><div class="v-btn__content">播出地區資訊</div></button>
+              <iframe name="main" id="main" src='iframe.html' frameborder="0" scrolling="no" style="width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;display: none;z-index: 5000;"></iframe> -->
             </div>
         </footer>
           <div class="fixed-btn">
@@ -1815,6 +1816,14 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script async defer src="js/index.js"></script>
     <script src="js/lazy-load.js" async></script>
+    <script type="text/javascript">
+
+      console.log(document.getElementById("main").contentWindow.document.body);
+      $('.test-ifr').click(function() {
+        document.getElementById("main").style.display = 'block';
+      })
+     
+     </script>
 </body>
 
 </html>