阻止模态框在点击外部或按下Esc键时关闭

Question

阻止模态框在点击外部或按下Esc键时关闭

5

防止模态框在点击外部或按下 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。所以我的问题是如何使背景变成静态，键盘变成false。我尝试过使用jquery等各种方法，但都没有成功。

- aravind_reddy

你解决了这个问题吗？ - FacundoGFlores

我已经将我的做法作为答案添加了。 - aravind_reddy

3个回答

1

实际上，使用 react-materialize 版本 1.1.1，您应该拥有 react 版本 16，否则会导致问题，因此您必须升级您的 react 版本到 16，然后使用 dissmissible:false。否则，modal options prop 无法与 react-materalize 的早期版本一起使用。如果您被迫使用 react 的早期版本，则可以使用 npm 模块 react-onclickoutside 来添加事件监听器，以便在单击 react-materailze modal 外部或按下 ESC 键时执行所需操作。

- aravind_reddy

1

对于在 Ant Design 版本 >= 4 中遇到困难的人，可以使用 closable 控制点击模态框外部关闭，使用 keyboard 控制按下 ESC 键关闭。

以下是一个禁用按下 ESC 或点击模态框外部关闭的示例 -

<Modal {...props} closable={false} keyboard={false} />

请查看 - API文档以获取更多详细信息

- seebham

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FacundoGFlores · Accepted Answer

您需要将 dismissible: false 传递给 modalOptions 属性。如果您需要设置更多选项，可以查看源代码：

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

我在本地主机上尝试过它（由于某种奇怪的原因，我无法在codesandbox上使其正常工作）。

目前为止：

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>