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

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

ただいまの
回答率

89.06%

モーダルが表示されない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,980

aizone

score 12

前提・実現したいこと

Bootstrapでボタンをクリックするとモーダルがポップアップするサイトを作っています。
ボタンを押すと一瞬だけアクションが起きるのですが、すぐに元の画面に戻ってしまいます。
アドバイスや同じような挙動が起きたなど些細なことでも心当たりがあれば、ご助言をお願いします。

[ボタン(この写真を削除)を押す前]
イメージ説明

[ボタンを押した瞬間(表示されない)]
イメージ説明

[ボタン押した後]
イメージ説明

該当のソースコード

///<reference path="../../typings/index.d.ts" />  

import * as React from "react";  
import { Link } from "react-router";  
import * as leaflet from "leaflet";  
import * as ReactDOM from "react-dom";  
import { Map, TileLayer, Popup, Marker } from "react-leaflet";  


export interface RecordMapProps {lat:number, lon:number}  

export class RecordMap extends React.Component<RecordMapProps, {}> {  

render() {  
const position = [37.487509, 139.9303462];  
return (  
<div id="recordMap" className="recordMap-content">  

<div className="modal fade" id="sampleModal" >  
<div className="modal-dialog">  
<div className="modal-content">  
<div className="modal-header">  
</div>  
<div className="modal-body">  
</div>  
<div className="modal-footer">  
</div>  
</div>  
</div>  
</div>  


<Map center={position} zoom={16}>  
<TileLayer  
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'  
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>  
<Marker position={position}>  
<Popup>  
<span><img src="/images/120x100.png" className="img-fix"></img><br/>  
<button type="button" className="btn btn-danger btn-sm" data-toggle="modal" data-target="#sampleModal" data-clickbotton="ボタン">  
この写真を削除  
</button>  
</span>  
</Popup>  
</Marker>  
</Map>  

</div>  

);  
}  
}
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<title>alq-keystone</title>  
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">  
<link href="/styles/site.css" rel="stylesheet">  
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">  
</head>  
<body>  
<div id="header">  
</div>  
<div id="body" class="body clearfix">  
<div class="body__container container">  
<div id="react-stage" class="clearfix">  
<hr>  
<!--  
if user && user.canAccessKeystone  
p  
a(href='/keystone').btn.btn-lg.btn-primary Open the Admin UI  
else  
p We have created a default Admin user for you with the email <strong>admin@example.com</strong> and the password <strong>admin</strong>.  
p  
a(href='/keystone/signin', style='margin-right: 10px').btn.btn-lg.btn-primary Sign in  
|  to use the Admin UI.  
-->  
</div>  
</div>  
</div>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>  
<script src="/js/jquery/jquery-1.11.3.min.js"></script>  
<script src="/js/bootstrap/bootstrap-3.3.5.min.js"></script>  
<script src="/js/flat-ui-pro/flat-ui-pro.min.js"></script>  
<script type="text/javascript" src="/js/geojson.min.js"></script>  
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>  
</body>  
<script src="./dist/bundle.js"></script>  
</html>
"use strict";  
var __extends = (this && this.__extends) || function (d, b) {  
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];  
function __() { this.constructor = d; }  
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());  
};  
var React = require("react");  
var RecordMap_1 = require("./RecordMap");  
var ViewRecordMap = (function (_super) {  
__extends(ViewRecordMap, _super);  
function ViewRecordMap() {  
_super.apply(this, arguments);  
}  
ViewRecordMap.prototype.render = function () {  
var position = { lat: 37.4878198, lon: 139.9296657 };  
return (React.createElement(RecordMap_1.RecordMap, {lat: position.lat, lon: position.lon}));  
};  
return ViewRecordMap;  
}(React.Component));  
exports.ViewRecordMap = ViewRecordMap;  
//# sourceMappingURL=ViewRecordMap.js.map  

補足情報(言語/FW/ツール等のバージョンなど)

[言語]
JavaScript
TypeScript
[フレームワーク]
keystone : 0.3.19
[ライブラリ]
Bootstrap
Flat-Ui
react : 15.30
react-dom : 15.3
react-leaflet : 0.12.3
react-router : 2.7.0

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gin

    2016/10/24 12:22

    Bootstrapの問題ではなくJSの問題だと思うので、[javascript][typescript][React]などのタグを追加して見てもらった方がいいと思います。 あとなるべく回答者が気軽に検証しやすいようhtmlやjavascriptにコンパイルした状態で掲載するといいと思います。

    キャンセル

  • aizone

    2016/10/24 17:28

    迅速なご助言ありがとうございます。ご指摘された通り修正いたしました。

    キャンセル

回答 1

check解決した方法

+1

"react-bootstrap"というライブラリを導入して解決しました。
以下はそのソースコードです。
///<reference path="../../typings/index.d.ts" />

import * as React from "react";
import { Link, Redirect, IndexRedirect } from "react-router";
import * as leaflet from "leaflet";
import * as ReactDOM from "react-dom";
import { Map, TileLayer, Popup, Marker } from "react-leaflet";
import { Button, Modal, ButtonToolbar } from "react-bootstrap";

export interface RecordMapProps {lat:number, lon:number}

interface S {
showModal?: boolean;
closeOnClick? : boolean;
}

export class RecordMap extends React.Component<RecordMapProps, S> {
constructor(props: RecordMapProps) {
super(props);
}

state: S = {
showModal: false,
closeOnClick : true
}

render() {
var items: any = [];
var marker = [
{ id: 0, lat: 37.488509, lon: 139.9302962 },
{ id: 0, lat: 37.486419, lon: 139.9301372 },
{ id: 0, lat: 37.485329, lon: 139.9300282 },
{ id: 0, lat: 37.483239, lon: 139.9308192 },
{ id: 0, lat: 37.484149, lon: 139.9309802 },
];

for(var i = 0, len = marker.length; i < len; i++) {
var temp = [marker[i].lat, marker[i].lon];
items.push(
<Marker position={temp}>
<Popup>
<span>
<img src="images/120*100.png" className="" />
<br/>
<Button className="fix-botunn" bsStyle="danger" bsSize="xsmall"
onClick={() => {this.setState({ showModal: true})}}>
この写真を削除
</Button>
</span>
</Popup>
</Marker>
);
}

const position = [37.487509, 139.9303462];
return (
<div id="recordMap" className="recordMap-content">
<Map center={position} zoom={16} className="recordMap-height">
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>
<Marker position={position}>
<Popup>
<span>
<img src="images/120*100.png" className="" />
<br/>
<Button className="fix-botunn" bsStyle="danger" bsSize="xsmall"
onClick={() => {this.setState({ showModal: true})}}>
この写真を削除
</Button>
</span>
</Popup>
</Marker>
{items}
</Map>
<Modal show={this.state.showModal}>
<Modal.Header>
<Modal.Title>ヘッダー</Modal.Title>
</Modal.Header>
<Modal.Body>
<span>
写真を削除しますか?
</span>
</Modal.Body>
<Modal.Footer>
<Button bsSize="small" className="button-float" onClick={() => this.setState({ showModal: false})}>閉じる</Button>
<Button bsStyle="danger" bsSize="small" closeOnClick="false" onClick={() => this.setState({ showModal: false})}>削除する</Button>
</Modal.Footer>
</Modal>

</div>

);
}
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る