Materialise CSS 模态未出现在 node.js 中

Question

我正在使用把手创建我的登录弹出窗口并实现 CSS。因此登录按钮位于 mainLayout 中，当用户单击该按钮时，它将调用部分布局并显示登录弹出窗口。

但我不知道为什么我的登录弹出窗口在单击按钮时没有打开。这是我调用 loginModal 的 MainLayout。

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="navbar-fixed ">
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo left" style="text-decoration:none">Bloggy</a>
      <ul class="right">
        <li><a href="#">CART</a>
        </li>
        <li><a href="#modal1" class="btn waves-effect waves-light red darken-4 loginBtn">LOGIN</a></li>

      </ul>
      <form class=" hide-on-med-and-down" id="form1">
        <div class="input-field" style="max-width: 400pt;">
          <input id="search" type="search" required onkeyup="getBlogs(this.value,0);" placeholder="Search">
          <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
          <div id="searchResults"></div>
        </div>
      </form>

    </div>
  </nav>
</div>


<div class="row">
  <div class="sidenav col l3 s5 m4 z-depth-5">
    <ul>
      <li><a href="sass.html">Signature</a></li>
      <li class="subsection"><a href="/add">Upload</a></li>

      <li class="line"></li>
      <li><a href="/home">Home</a></li>
      <li><a href="/store">Store</a></li>
      <li><a href="sass.html">Request</a></li>
      <li><a href="sass.html">Contact</a></li>
      <li><a href="sass.html">FAQ</a></li>
      <li><a href="sass.html">About us</a></li>
    </ul>
  </div>
</div>


<div class="MainBody">
  {{> loginModal}}
  {{{body}}}
</div>

我的 LoginModal 弹出窗口

<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.modal').modal();
    });
</script>

我还在 handlebars 初始化期间定义了 partials 布局目录

app.engine('hbs',handlebars({
    layoutsDir : __dirname + '/views/layouts',
    defaultLayout : "mainLayout",
    extname : "hbs",
    partialsDir : __dirname + '/views/partial/'
}))

此外，当我将整个 loginPopUp 代码放入其他部分时，它的工作正常 fine.So 我认为模态没有任何问题。

不知道为什么通过 mainLayout 调用时我的弹出窗口不起作用。任何帮助将不胜感激。

Answer 1

滚动到底部获取更新

我试图重现您的问题，但未能重现。这对我有用..唯一的区别是我引入了物化 css 文件..

You can fork the repo here if you want

/index.js

const express = require('express');
const handlebars = require('express-handlebars');

const app = express();
const appPort = 3000;

app.engine(
  'hbs',
  handlebars({
    layoutsDir: __dirname + '/views/layouts',
    defaultLayout: 'mainLayout',
    extname: 'hbs',
    partialsDir: __dirname + '/views/partial/',
  })
);

app.set('view engine', 'hbs');

app.get('*', (_req, res) => {
  res.render('layouts/mainLayout');
});

app.listen(appPort, () => {
  console.log(`App listening on port: ${appPort}`);
});

/views/layouts/mainLayout.hbs

<body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

  <div class="navbar-fixed ">
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo left" style="text-decoration:none">Bloggy</a>
        <ul class="right">
          <li><a href="#">CART</a>
          </li>
          <li><a href="#modal1" class="btn waves-effect waves-light red darken-4 loginBtn">LOGIN</a></li>

        </ul>
        <form class=" hide-on-med-and-down" id="form1">
          <div class="input-field" style="max-width: 400pt;">
            <input id="search" type="search" required onkeyup="getBlogs(this.value,0);" placeholder="Search">
            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
            <i class="material-icons">close</i>
            <div id="searchResults"></div>
          </div>
        </form>

      </div>
    </nav>
  </div>


  <div class="row">
    <div class="sidenav col l3 s5 m4 z-depth-5">
      <ul>
        <li><a href="sass.html">Signature</a></li>
        <li class="subsection"><a href="/add">Upload</a></li>

        <li class="line"></li>
        <li><a href="/home">Home</a></li>
        <li><a href="/store">Store</a></li>
        <li><a href="sass.html">Request</a></li>
        <li><a href="sass.html">Contact</a></li>
        <li><a href="sass.html">FAQ</a></li>
        <li><a href="sass.html">About us</a></li>
      </ul>
    </div>
  </div>


  <div class="MainBody">
    {{> loginModal}}
    {{{body}}}
  </div>

/views/partial/loginModal.hbs

<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $('.modal').modal();
  });
</script>

package.json

{
  "name": "materialize-css-modal-issues",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "express-handlebars": "^4.0.4",
    "handlebars": "^4.7.6"
  }
}

-------------------- 更新 1 -- ----------------------

我可以通过将 mainLayout.hbs 更改为下面的代码来解决此问题。本质上，我只是将所有脚本标签移动到mainLayout.

如果你愿意，你可以通过更改来分叉我的回购协议，或者我可以向你发送 PR...随你喜欢。

Repo can be found here

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pics Art</title>
    <link rel="stylesheet" href="/css/navbar.css">


    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" />
  </head>



  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>

    <div class="navbar-fixed ">
      <nav>
        <div class="nav-wrapper">
          <a href="#!" class="brand-logo left" style="text-decoration:none">Bloggy</a>
          <ul class="right">
            <li><a href="#">CART</a>
            </li>
            {{!-- <li><a class="login" href="login.php">LOGIN</a>
            </li> --}}
            <li><a href="#modal1" class="btn waves-effect waves-light red darken-4 loginBtn">LOGIN</a></li>

          </ul>
          <form class=" hide-on-med-and-down" id="form1">
            <div class="input-field" style="max-width: 400pt;">
              <input id="search" type="search" required onkeyup="getBlogs(this.value,0);" placeholder="Search">
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
              <div id="searchResults"></div>
            </div>
          </form>

        </div>
      </nav>
    </div>


    <div class="row">
      <div class="sidenav col l3 s5 m4 z-depth-5">
        <ul>
          <li><a href="sass.html">Signature</a></li>
          <li class="subsection"><a href="/add">Upload</a></li>

          <li class="line"></li>
          <li><a href="/home">Home</a></li>
          <li><a href="/store">Store</a></li>
          <li><a href="sass.html">Request</a></li>
          <li><a href="sass.html">Contact</a></li>
          <li><a href="sass.html">FAQ</a></li>
          <li><a href="sass.html">About us</a></li>
        </ul>
      </div>
    </div>


    <div class="MainBody">
      {{> loginModal}}
      {{{body}}}
    </div>
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    -->

Materialise CSS 模态未出现在 node.js 中

Materialze CSS modal not showing up in node.js

node.js

materialize

handlebars.js