質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3998閲覧

[React.js] PopoverがModal上に重なる

aizone

総合スコア12

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/10/31 08:51

###前提・実現したいこと
以下の画像の通り、PopoverがModal上に表示されるので、そうでなくModalがPopover上に表示できるようにしたい。もしくはModalが表示されるときにPopoverを消したい。

1.「ポップオーバーボタン」を押下
イメージ説明
2.「モーダル表示ボタン」を押下
イメージ説明
3.Modal上にPopoverが表示される
イメージ説明

###該当のソースコード

Typescript

1///<reference path="../../typings/index.d.ts" /> 2 3import * as React from "react"; 4import { Link } from "react-router"; 5import * as ReactDOM from "react-dom"; 6import { Button, OverlayTrigger, Popover, Modal } from "react-bootstrap"; 7 8 9export interface TempNotificationListProps { title: string } 10 11interface S { 12 showModal?: boolean; 13} 14 15export class TempNotificationList extends React.Component<TempNotificationListProps, S> { 16 constructor(props:TempNotificationListProps) { 17 super(props); 18 } 19 20 state: S = { 21 showModal: false, 22 } 23 24 render() { 25 26 const popoverBottom = ( 27 <Popover id="popover-positioned-scrolling-bottom" ref='popover'> 28 <Button className="btn-link btn-ghost" 29 onClick={() => { this.setState({ showModal: true}) }}> 30 モーダル表示ボタン 31 </Button> 32 </Popover> 33 ); 34 35 return ( 36 <div className=""> 37 <Modal show={this.state.showModal} bsSize="lg"> 38 <Modal.Footer> 39 <Button bsStyle="danger" bsSize="small" closeOnClick="false" onClick={() => this.setState({ showModal: false})}>閉じる</Button> 40 </Modal.Footer> 41 </Modal> 42 <OverlayTrigger trigger="click" rootClose placement="bottom" ref="myPopover" overlay={popoverBottom}> 43 <Button>ポップオーバーボタン</Button> 44 </OverlayTrigger> 45 </div> 46 ); 47 48 49 } 50} 51

Javascript

1"use strict"; 2var __extends = (this && this.__extends) || function (d, b) { 3 for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 4 function __() { this.constructor = d; } 5 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 6}; 7var React = require("react"); 8var react_bootstrap_1 = require("react-bootstrap"); 9var TempNotificationList = (function (_super) { 10 __extends(TempNotificationList, _super); 11 function TempNotificationList(props) { 12 _super.call(this, props); 13 this.state = { 14 showModal: false, 15 }; 16 } 17 TempNotificationList.prototype.render = function () { 18 var _this = this; 19 var popoverBottom = (React.createElement(react_bootstrap_1.Popover, {id: "popover-positioned-scrolling-bottom", ref: 'popover'}, 20 React.createElement(react_bootstrap_1.Button, {className: "btn-link btn-ghost", onClick: function () { _this.setState({ showModal: true }); }}, "モーダル表示ボタン") 21 )); 22 return (React.createElement("div", {className: ""}, 23 React.createElement(react_bootstrap_1.Modal, {show: this.state.showModal, bsSize: "lg"}, 24 React.createElement(react_bootstrap_1.Modal.Footer, null, 25 React.createElement(react_bootstrap_1.Button, {bsStyle: "danger", bsSize: "small", closeOnClick: "false", onClick: function () { return _this.setState({ showModal: false }); }}, "閉じる") 26 ) 27 ), 28 React.createElement(react_bootstrap_1.OverlayTrigger, {trigger: "click", rootClose: true, placement: "bottom", ref: "myPopover", overlay: popoverBottom}, 29 React.createElement(react_bootstrap_1.Button, null, "ポップオーバーボタン") 30 ))); 31 }; 32 return TempNotificationList; 33}(React.Component)); 34exports.TempNotificationList = TempNotificationList; 35//# sourceMappingURL=TempNotificationList.js.map

###補足情報(言語/FW/ツール等のバージョンなど)
Typescript
React.js
react-bootstrap
keystone.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

<Button>を使わずに<ListGroupItem>にクリックイベントをつけるとモーダルに重ならずにすみました。

Typescript

1<ListGroupItem onClick={() => { this.setState({ showModal: true }) }} ><p>Hogehoge</p></ListGroupItem>

投稿2016/11/16 13:12

aizone

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問