Question

在点击外部或按 Esc 键

时停止关闭模式

<Modal
    id='VideoPlayer'
    modalOptions={{ dismissible: false }}
    trigger={
           <VideoPlay
        className='modal-close'
        id='myBtn3'> PLAY VIDEO
      </VideoPlay>
      }
  >
    <div id='overlay' className='modal-close modal-action' data-toggle='VideoPlayer' onClick={this.handleClose}>
      <i className='material-icons close'>close</i>
    </div>
    <div className='flowplayer'>
      <video id='Player1'>
        <source type='video/webm' src='//edge.flowplayer.org/bauhaus.webm' />
        <source type='video/mp4' src='//edge.flowplayer.org/bauhaus.mp4' />
      </video>
    </div>
  </Modal>

我正在使用react-materialize模态http://react-materialize.github.io/#/modals

我认为默认情况下背景和键盘设置为true。所以我的问题是如何使静态和键盘的背景为假。我尝试了各种方法，比如使用jquery，但没有任何工作。

Answer 1

你需要传递

dismissible: false

进入modalOptions属性。

如果您需要设置更多选项，可以查看源代码：

https://github.com/react-materialize/react-materialize/blob/master/src/Modal.js

我在我的localhost中尝试过它（由于一些奇怪的原因，我无法在codeandbox上运行它。）

现在：

<强> app.js

import React, { Component } from "react";

import { Button, Modal } from "react-materialize";

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <Modal
          modalOptions={{ dismissible: false }}
          header={"header"}
          trigger={<Button>trigger</Button>}
        >
          content
        </Modal>
      </div>
    );
  }
}

export default App;

<强>的package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-materialize": "^1.1.1",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

<强>的index.html

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</body>

</html>

Answer 2

实际上使用react -materialize版本1.1.1你应该对版本16做出反应，否则它会导致问题所以要么你必须将你的反应版本升级到16然后使用dissmissible:false。否则模态选项道具不起作用与之前版本的react-materalize。如果您被迫拥有以前版本的react，那么您可以使用npm模块 react-onclickoutside 让事件监听器与我在“反应”之外点击时所需的那些-materailze模态或按ESC键时

单击外部或按Esc键关闭模式

2 个答案: