psy_vk

Paused

App Files Files Community

DmitrMakeev commited on Aug 25, 2024

Commit

09ef128

verified ·

1 Parent(s): 864fc51

Update pages.html

Browse files

Files changed (1) hide show

pages.html +121 -1

pages.html CHANGED Viewed

@@ -300,6 +300,73 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 </style>
     <style>
     .input-row {
@@ -341,6 +408,11 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
       border-bottom: 2px solid #388E3C !important;
     }
   </style>
 </head>
 <body>
   <script>
@@ -354,7 +426,8 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
   <!-- Кнопка для открытия модального окна -->
   <button id="myBtn" style="position: absolute; top: 30px; right: 10px;">Открыть модальное</button>
-  <button id="myBtn_2" style="position: absolute; top: 50px; right: 10px;">Открыть модальное_2</button>
   <!-- Кнопка для проверки работы -->
   <button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button>
@@ -434,6 +507,31 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
   <script>
     // Инициализация GrapesJS редактора
@@ -816,6 +914,28 @@ window.onclick = function(event) {

 </style>
+    <style>
+/* Модальный (фон) */
+.modal_3 {
+  display: none; /* Скрыто по умолчанию */
+  position: fixed; /* Оставаться на месте */
+  z-index: 10; /* Сидеть на вершине */
+  padding-top: 100px; /* Расположение коробки */
+  left: 0;
+  top: 0;
+  width: 100%; /* Полная ширина */
+  height: 100%; /* Полная высота */
+  overflow: auto; /* Включите прокрутку, если это необходимо */
+  background-color: rgb(0,0,0); /* Цвет запасной вариант  */
+  background-color: rgba(0,0,0,0.4); /*Черный с непрозрачностью */
+}
+/* Модальное содержание */
+.modal-content_3 {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 100%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop_3;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop_3;
+  animation-duration: 0.4s
+}
+/* Добавить анимацию */
+@-webkit-keyframes animatetop_3 {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+@keyframes animatetop_3 {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+/* Кнопка закрытия */
+.close_3 {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close_3:hover,
+.close_3:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+.modal-header_3 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+.modal-body_3 {padding: 2px 16px;}
+.modal-footer_3 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+  </style>
     <style>
     .input-row {
       border-bottom: 2px solid #388E3C !important;
     }
   </style>
 </head>
 <body>
   <script>
   <!-- Кнопка для открытия модального окна -->
   <button id="myBtn" style="position: absolute; top: 30px; right: 10px;">Открыть модальное</button>
+  <button id="myBtn_2" style="position: absolute; top: 60px; right: 10px;">Открыть модальное_2</button>
+    <button id="myBtn_3" style="position: absolute; top: 90px; right: 10px;">Открыть модальное_3</button>
   <!-- Кнопка для проверки работы -->
   <button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button>
+<!-- The Modal_3 -->
+<div id="myModal_3" class="modal_3">
+  <!-- Модальное содержание -->
+  <div class="modal-content_3">
+    <div class="modal-header_3">
+      <span class="close_3">&times;</span>
+      <h2>HTMLешка</h2>
+    </div>
+    <div class="modal-body_3">
+      <iframe id="iframe1" src="https://dmtuit-psy-vk.hf.space/buil_json?api_sys=fasSd345D" title="Iframe Example"></iframe>
+      <br><br><br>
+    </div>
+    <div class="modal-footer_3">
+      <h3>Добавление HTML файла с пользовательским маршрутом.</h3>
+    </div>
+  </div>
+</div>
   <script>
     // Инициализация GrapesJS редактора
+<script>
+// Get the modal_3
+var modal_3 = document.getElementById("myModal_3");
+// Get the button that opens the modal
+var btn_3 = document.getElementById("myBtn_3");
+// Get the <span> element that closes the modal
+var span_3 = document.getElementsByClassName("close_3")[0];
+// When the user clicks the button, open the modal
+btn_3.onclick = function() {
+  modal_3.style.display = "block";
+}
+// When the user clicks on <span> (x), close the modal
+span_3.onclick = function() {
+  modal_3.style.display = "none";
+}
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal_3) {
+    modal_3.style.display = "none";
+  }
+}
+</script>