单击外部或按 Esc 键时停止模态关闭

Question

单击外部或按 Esc 键时停止模态关闭

单击外部或按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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Fac*_*res 3

你需要通过

dismissible: false

进入modalOptions财产。

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

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

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

现在流动：

应用程序.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;

Run Code Online (Sandbox Code Playgroud)

包.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"
  }
}

Run Code Online (Sandbox Code Playgroud)

索引.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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	5365 次
最近记录：	3 年，1 月前