javascript - 关闭 Materialise CSS Modal 后， "modal-overlay"仍然存在——我们如何在不接触覆盖层的情况下关闭它？

Question

我有一个加号按钮，可以在 React 中打开 Materialize CSS Modal:

加号按钮

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

关闭按钮点击功能使类不显示

例如

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