關閉 Materialise CSS Modal 后，“modal-overlay”仍然存在 - 我們如何在不觸摸覆蓋的情況下關閉它？

Question

我有一個加號按鈕，可以在 React 中打開 Materialize CSS 模態：

加號按鈕

import React from "react";

const AddBtn = ({ tooltipMessage, hrefDescription }) => {
  const hrefAddBtn = "#" + hrefDescription;
  return (
    <div className="fixed-action-btn">
      <a
        href={hrefAddBtn}
        data-position="left"
        data-tooltip={tooltipMessage}
        className="btn-floating btn-large blue darken-2 modal-trigger tooltipped"
      >
        <i className="large material-icons">add</i>
      </a>
    </div>
  );
};

export default AddBtn;

和模態：

const CreditModal = ({ closeModal }) => {


  return (
    <Fragment>
      <div id="add-balance" className="modal" style={modalStyle}>

                ..... A lot of code goes here 
      <div>


    </Fragment>
);
}

它們都在一個組件中：

const AddCredit = ({........}) => {

 return (

   <div className="container">
        {someBoolean ===  true? (
          <Fragment>
            <AddBtn tooltipMessage="Add Credit" hrefDescription="add-balance" />
            <CreditModal closeModal={closeModalAndOpenIFrame} />
          </Fragment>
        ) : (
          <Fragment>
            // Show some other Component
          </Fragment>
        )}
   </div>

 )


}

當我使用按鈕關閉框架時，模式關閉但覆蓋仍然存在，它看起來像這樣：

<div class="modal-overlay" style="z-index: 1002; display: block; opacity: 0.5;"></div>

這不是我做的，可能它來自模態並保持不變，擺脫這種情況的唯一方法是單擊疊加層，我不希望那樣。

我們如何以編程方式刪除此覆蓋？

Answer 1

在關閉按鈕上單擊 function 使 class 顯示無

例如

 $("button").click(function(){ $(".modal-overlay").css("display","none"); });