堆棧內存溢出
  簡體   English   中英

如果我使用單獨的html / css頁面，如何創建模式彈出效果？

[英]How can I create modal popup effect, If I'm using separate html/css pages?

 原文  2019-03-11 15:36:56  0   2    javascript/ jquery/ html/ css

問題描述

我想在每次單擊索引頁面上的“登錄”時創建“模式彈出”效果。

唯一的是，我創建了單獨的HTML / CSS頁面（例如，index.html / css，login.html / css等）。

我很困惑，如何使用JavaScript實現這一目標。

由於我有單獨的頁面。 我知道如何使用JavaScript在單個html / css頁面上應用模式彈出效果。

但是，如果我使用幾個不同的頁面，我不知道該如何實現。 我的代碼看起來有點混亂。 我所有的頁面都正確鏈接在一起，但沒有任何作用。

以下是我的index.html代碼和login.html代碼以及CSS代碼。

index.html代碼：- 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="index.css">
  <link href="login.html">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <title>MyWeb</title>

</head>

<body>

  <div class="header">
    <h1> <i class="fas fa-music"></i>Spotify</h1>
    <div class="searchbox">
      <input class="search-txt" type="text" name="" placeholder="Type to search">
      <a class="search-btn" href="#">
        <i class="fas fa-search"></i>
      </a>

    </div>
  </div>

  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
    <div class="siderbarMenuInner">

      <li> <div class="show-login-button"> <i class="fas fa-sign-in-alt"></i> <a href="login.html">login</a></div></li> 
      <li> <i class="fas fa-home"></i> Home </li>
      <li> <i class="fas fa-search"></i> browse </li>
      <li> <i class="fab fa-itunes-note"></i> My Playlist</li>
      <li> <a href="about.html">About </a> </li>

      </ul>

      <div class="Instagram">
        <a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
      </div>
      <div class="Twitter">
        <a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
      </div>
      <div class="Facebook">
        <a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
      </div>
    </div>


</body>

</html>

index.css代碼：- 

body {
  overflow-x: hidden;
  height: 100%;
  background-color: white;

}

body {
  font-family: tahoma;
  margin: 0;
  padding: 0;
}

.header {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  background-color: #fc466b;
  position: fixed;
  height: 50px !important;
  overflow: hidden;
  z-index: 10;
}


h1 {
  margin: 1px;
  top: 13%;
  color: #2f3640;
  text-decoration: none;
  position: absolute;
  left: 3%;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

h1:hover {
  color: white;
}

h1 i {

  font-size: 20px;
  letter-spacing: 8px;
}

.searchbox {
  position: absolute;
  border-radius: 40px;
  right: 2%;
  background: #2f3640;
  height: 40px;
  top: 6%;
  padding: 0.1%;

}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 18px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;

}

.search-btn {
  color: #fc466b;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
  text-decoration: none;
}

.searchbox:hover>.search-txt {
  width: 500px;
  padding: 0 6px;
}

.searchbox:hover>.search-btn {
  background: white;
}

.main {
  margin: 0 auto;
  display: block;
  height: 100%;
  margin-top: 50px;
}

.mainInner {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

#sidebarMenu {

  height: 100%;
  position: fixed;
  left: 0;
  width: 250px;
  margin-top: 50px;
  transform: translateX(-250px);
  transition: transform 250ms ease-in-out;
  background: linear-gradient(180deg, #fc466b, #3f5efb);

}

.siderbarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.siderbarMenuInner li {
  list-style: none;
  color: #2f3640;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 30px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  text-align: center;
  transition: 0.4s;
}

.siderbarMenuInner li:hover {
  color: white;

}

.siderbarMenuInner li span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none !important;
  color: inherit;
}

.sidebarMenuInner li a {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;

}

input[type="checkbox"]:checked~#sidebarMenu {

  transform: translateX(0);
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {

  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 22px;
  left: 15px;
  height: 22px;
  width: 22px;
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: white;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

a {
  text-decoration: none !important;
  color: inherit;
}

.Instagram {
  top: 90%;
  left: 16%;
  color: azure;
  font-size: 20px;
  position: absolute;
  letter-spacing: 25px;
  transition: 0.3s;
  cursor: pointer;
}

.Instagram:hover {
  color: black;
}

.Twitter {
  text-align: center;
  top: 90%;
  left: 45%;
  color: azure;
  font-size: 20px;
  position: absolute;
  letter-spacing: 25px;
  transition: 0.3s;
  cursor: pointer;
}

.Twitter:hover {
  color: black;
}

.Facebook {
  text-align: center;
  top: 90%;
  left: 75%;
  color: azure;
  font-size: 20px;
  position: absolute;
  letter-spacing: 25px;
  transition: 0.3s;
  cursor: pointer;
}


.Facebook:hover {
  color: black;
}

login.html代碼：- 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Animated Login Form</title>
  <link rel="stylesheet" href="login.css">
  <link rel="" href="index.html">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>

<body>

 >
  <div class="login-form">

    <form class="login-box" action="index.html" method="post">

      <h1>Login</h1>
      <input class="txtb" type="text" name="" placeholder="Username">
      <input class="txtb" type="password" name="" placeholder="Password">
      <input class="login-btn" type="submit" name="" value="Login">
    </form>
  </div>

</body>

</html>

login.css代碼：- 

* {
  font-family: "Monteserrat", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}


.login-form{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, #fc466b, #3f5efb);
  transition: 0.4s;
}
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.login-box h1 {
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 0;
}

.txtb {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #1c2830;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}

.txtb:focus {
  width: 280px;
  border-color: #000000;
}

.login-btn {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #000000;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.login-btn:hover {
  background: #000000;
}

單個HTML頁面上模態的JS代碼：- 

// GetElements
const modal = document.querySelector('#modal');
const modal_btn = document.querySelector('#modal-btn');
const close_btn = document.querySelector('.close');

//Event_Listener
modal_Btn.addEventListener('click', openModal);
close_Btn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

//Open & Close
function openModal() {
  modal.style.display = 'block';
}

function closeModal() {
  modal.style.display = 'none';
}

2 個解決方案

解決方案1
 1  2019-03-14 11:09:46

如果我的理解正確，您正在嘗試使用單獨的HTML文件作為模式，對嗎？ 如果正確，請嘗試觀察此答案： 從其他html文件打開Modal（引導程序）

解決方案2
 0  2019-03-18 14:17:10

GetAjax獲取遠程文件，而load_modal只是調用getajax並加載模式的簡寫函數。 

    function getAjax(url, success) {
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('GET', url);
            xhr.onreadystatechange = function() {
                if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
            };
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send();
            return xhr;
        }

function load_modal(url){
     getAjax(url, function(data){
            modal.innerHTML = data;
            modal.style.display = 'block';
     });
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 HTML/CSS 中使用語義 UI 創建模態？ 如何使用javascript和CSS創建模態彈出窗口 如何為我的按鈕創建模態效果？ 如何在KnockoutJS中創建“滑動頁面”效果？ CSS3 / HTML5 / JS-如何創建帶有幻燈片效果的動畫紋理背景？ 如何重新創建此效果/過渡/動畫？ （HTML / CSS / JQuery） 如何在彈出窗口中集中輸入（模式） 如何使用JavaScript創建CSS發光效果？ 我如何通過使用HTML，CSS和JavaScript來實現這種效果（請參閱內部）？ 如何分隔HTML元素和CSS元素並返回它們？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM