Javascript 如果我'；我使用单独的html/css页面？_Javascript_Jquery_Html_Css

Javascript 如果我'；我使用单独的html/css页面？

javascript jquery html css

Javascript 如果我'；我使用单独的html/css页面？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想创建一个模式弹出效果，每次我点击“登录”在我的索引页唯一的问题是，我已经创建了单独的HTML/CSS页面（例如，index.HTML/CSS、login.HTML/CSS等等）我很困惑，如何使用JavaScript实现这一点因为我有不同的页面。我知道如何使用JavaScript在单个html/css页面上应用模式弹出效果但是如果我使用了几个不同的页面，我不知道如何做到这一点。我的代码看起来有点乱。我的所有页面都正确地相互链接，但没有任何效果下面是我的index.html代码和log

我想创建一个模式弹出效果，每次我点击“登录”在我的索引页

唯一的问题是，我已经创建了单独的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>

<!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>

<!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>

<!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>

单个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';
}

如果我理解正确的话，您正试图使用一个单独的HTML文件作为模式，对吗？如果正确，请尝试观察以下答案：

GetAjax获取远程文件并加载\u model只是一个调用GetAjax并加载model的速记函数

    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';
     });
}

能否显示用于实际生成从现有文件打开内容的现有模式的jQUERY代码？有很多插件/方法可以创建modals，因此很难知道您使用了什么方法。请您更好地解释一下这个问题，我不知道您的意思：您想知道如何在所有页面上加载JS文件吗？抱歉，不清楚。@imvain2我还没有使用任何JQUERY代码，只是将库与我的项目链接了起来。因为我不知道如果有单独的html页面来实现模式，如何使用JQUERY。@Demian我为登录、关于、库和索引创建了单独的html页面。所以我不知道如何以正确的方式使用JS来实现模式。我是否必须为每个Login.html、Index.html等使用单个JS页面或单独的JS页面。。这就是我想知道的。我在youtube上看到的所有视频都展示了如何使用JS在单个index.html文件上实现模式弹出。但在我的项目中，我有单独的页面。所以我很困惑，在这种情况下，你会如何创建模态？如果有单独的html页面，CMS是你的网站上？我的想法，但不知道如何实现它，在代码。只是JS的初学者，Trying.JQuery还没有在College中启动，您可以尝试以下方法：

来源：