个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 14:27:33 29 4
gpt4 key购买 nike

单击外部或按 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，但没有任何效果。

最佳答案

您需要通过

可驳回:假

进入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>

关于reactjs - 单击外部或按 Esc 键时停止模态关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47755421/

29 4 0
文章推荐： reactjs - 使选项卡切换有条件
文章推荐： Haskell 的代数数据类型 : "pseudo-extend"
文章推荐： github - GitHub 上的 FontAwesome 风格的 Markdown
文章推荐： haskell - 为什么在 MonadState 中使用 MultiParamTypeClasses
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com