Блог

Я переделываю свой сайт-портфолио в СПА-салон и хотел добавить модалы на одну из своих страниц. JS для них сохраняется в «main.js» файл и тег помещены в мой HTML-файл. Проблема в том, что это не работает, и я не уверен, почему. Дайте мне знать, если вам нужна дополнительная информация, я новичок в этом. Там нет функций, только прослушиватели событий.

Вот компонент:

 import React, { Component } from 'react';

import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';

import ScriptTag from 'react-script-tag';

let aScript = props => (
  <ScriptTag type="text/javascript" src="../js/main.js" />
)

class Work extends Component {


  render() {
    return (
      <section>
        <div>
          {/* Modal Background and Modal */}
          <div className="mCustomScrollbar" data-mcs-theme="dark" id="modal-background">
            <div id="modal">
              <span id="close-btn">×</span>
              <img className="modal-img" src="mockups/mockup.png" alt="expatcolombia" />
              <h2 className="modal-title">Expat Colombia</h2>
              <div className="modal-text">
                <h3>Description</h3>
                <p>Expat Service for people moving to Colombia. They provide consultations, tours, and assist in housing.</p>
                <h3>Dependencies</h3>
                <p>HTML, CSS, Javascript</p>
              </div>
              <div className="buttons">
                <a href="https://drxl95.github.io/Colombia/" target="_blank">Visit</a>
                <a href="https://github.com/Drxl95/Colombia" target="_blank">Github</a>
              </div>
            </div>
          </div>
          {/* Modal Background and Modal */}
          <div className="mCustomScrollbar2" data-mcs-theme="dark" id="modal-background2">
            <div id="modal2">
              <span id="close-btn2">×</span>
              <img className="modal-img2" src="mockups/poke-mockup.jpg" alt="expatcolombia" />
              <h2 className="modal-title">PokemonAPI</h2>
              <div className="modal-text2">
                <h3>Description</h3>
                <p>Pokemon-themed App with a that includes names, images, and stats of different Pokemons.</p>
                <h3>Dependencies</h3>
                <p>Javascript, JQuery, Ajax</p>
              </div>
              <div className="buttons2">
                <a href="poke_demo.html" target="_blank">Demo</a>
                <a href="https://github.com/Drxl95/PokemonAPI" target="_blank">Github</a>
              </div>
            </div>
          </div>
        </div>
        <div>
          <header className="ScriptHeader">
            <div>
              <h1>My Work</h1>
            </div>
          </header>
          <section id="work">
            {/*****Image size (height) is paramount to keep the photos formatted properly*****/}
            {/* Image row 1 */}
            <div className="row">
              <div className="column">
                <div className="container">
                  <img src={toDoListApp} className="image" alt="to-do-list-api" />
                  <a href="https://github.com/Drxl95/To-Do-List" target="_blank">
                    <div className="overlay">
                      <div className="text">Simple jQuery To Do List App</div>
                    </div>
                  </a>
                </div>
              </div>
              <div className="column">
                <a id="open-btn2">
                  <div className="container">
                    <img src={pokeMockup} className="image" alt="PokemanAPI" />
                    <div className="overlay">
                      <div className="text">Pokemon-themed API app <br /></div>
                    </div>
                  </div>
                </a>
              </div>
              <div className="column">
                <a id="open-btn">
                  <div className="container">
                    <img src={ExpatColMock} className="image" alt="expatcolombia.com" />
                    <div className="overlay">
                      <div className="text">Expat Colombia</div>
                    </div>
                  </div>
                </a>
              </div>
              <div className="column">
                <a href="https://github.com/Drxl95/DogAlbum" target="_blank">
                  <div className="container">
                    <img src={DogAPIMock} className="image" alt="dogAPI-mockup" />
                    <div className="overlay">
                      <div className="text">Dog Album API</div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            {/* Image row 2 */}
            {/* <div class="row">
        <div class="column">
      <a href="#">
        <div class="container">
          <img src="img/image-4.jpg" class="image">
          <div class="overlay">
            <div class="text">Example 4</div>
          </div>
        </div>
      </a>
    </div>
    <div class="column">
      <a href="#">
        <div class="container">
          <img src="img/image-5.jpg" class="image">
          <div class="overlay">
            <div class="text">Example 5</div>
          </div>
        </div>
      </a>
    </div>
    <div class="column">
      <a href="#">
        <div class="container">
          <img src="img/image-6.jpg" class="image">
          <div class="overlay">
            <div class="text">Example 6</div>
          </div>
        </div>
      </a>
    </div>
  </div> */}
            {/* partial */}
          </section>
        </div>
      </section>
    )
  }
}

export default Work
 

Файл JS:

     // select the open-btn button
let openBtn = document.getElementById('open-btn');
// select the modal-background
let modalBackground = document.getElementById('modal-background');
// select the close-btn 
let closeBtn = document.getElementById('close-btn');

// shows the modal when the user clicks open-btn
openBtn.addEventListener('click', function () {
    modalBackground.style.display = 'block';
});

// hides the modal when the user clicks close-btn
closeBtn.addEventListener('click', function () {
    modalBackground.style.display = 'none';
});

// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
    // check if the event happened on the modal-background
    if (event.target === modalBackground) {
        // hides the modal
        modalBackground.style.display = 'none';
    }
});

// select the open-btn button
let openBtn2 = document.getElementById('open-btn2');
// select the modal-background
let modalBackground2 = document.getElementById('modal-background2');
// select the close-btn 
let closeBtn2 = document.getElementById('close-btn2');

// shows the modal when the user clicks open-btn
openBtn2.addEventListener('click', function () {
    modalBackground2.style.display = 'block';
});

// hides the modal when the user clicks close-btn
closeBtn2.addEventListener('click', function () {
    modalBackground2.style.display = 'none';
});

// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
    // check if the event happened on the modal-background
    if (event.target === modalBackground2) {
        // hides the modal
        modalBackground2.style.display = 'none';
    }
});



// function addMusic() {
//     let navBarLists = document.getElementById('#navBarLists');
//     let musicListItem = document.createElement('li');

// }
 

В react есть крючки, которые представляют события. Это причина, по которой ваш код не работает