Materialze CSS模式不显示在node.js中

问题描述 投票：1回答：1

我正在使用车把创建我的登录弹出窗口并实例化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>

我在车把初始化期间也定义了局部布局目录

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

另外，当我将整个loginPopUp代码放在其他部分中时，它也可以正常工作。因此，我认为模态没有任何问题。

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

node.js handlebars.js materialize
1个回答
0
投票

我试图重现您的问题，但未能成功。这对我有用。.唯一的区别是我带入了物化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"
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.