Q&A<div id="content"> <!-- テーブルなどでリストを表示 --> </div> <div id="modal1" class="modal"> <!-- フォーム --> </div> <div id="modal2" class="modal"> <!-- フォーム --> </div> ・・・
twitter bootstrapを使って上記のように1つの画面にモーダルがかなり多い画面があります。モーダル内のフォームを変更して更新ボタンをおすとリストの内容が変更。(ここではサーバーとの通信などはなし)
現在1つのファイル(HTML)に全ての処理とモーダルが書かれていてかなり見ずらくなってしまっているのですが、上手いことモーダル単位で開発できないかと思っているのですが、どのような実装がよいかご教授いただけないでしょうか。またライブラリなども教えていただけないでしょうか
システム全体でなくてこの画面だけをメンテしたいと思っています。
回答2件
0
私自身初心者ですので、参考程度の回答です。
1.bootstrapではないですけど、ColorboxというjQueryの別htmlを読み込んで使用できるプラグインがあるらしいです！
http://gimmicklog.main.jp/jquery/299/
html
1<html lang="ja"> 2 <head> 3 <meta charset="utf-8"> 4 <title>colorbox</title> 5 <link href="http://cdn.insightnet.co.jp/js/colorbox/example1/colorbox.css" rel="stylesheet" type="text/css"> 6 </head> 7 <body> 8 9 <a class="iframe" href="iframe.html">Webページ読み込み</a> 10 11 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 12 <script type="text/javascript" src="http://cdn.insightnet.co.jp/js/colorbox/jquery.colorbox.min.js"></script> 13 <script> 14 $(function() { 15 $(".iframe").colorbox({ 16 iframe:true, 17 width:"50%", 18 height:"70%", 19 opacity: 0.5 20 }); 21 }); 22 </script> 23</body> 24</html>
iframe.html
html
1<html lang="ja"> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 </head> 6 <body> 7 <h1>モーダルウィンドウ</h1> 8 </body> 9</html>
2.モーダルウィンドウは一つだけにして、jQueryで押すボタンごとに表示内容を変更してみるとかどうですかね？
jQuery
1 $(function(){ 2 $(".button-1").on("click", function(){ 3 $(".modal-title").text("ボタン1の処理"); 4 }); 5 6 $(".button-2").on("click", function(){ 7 $(".modal-title").text("ボタン2の処理"); 8 }); 9 });
3.phpで読み込むとかどうなんですかね？
php
1include_once('モーダルウィンドウファイルへのパス');
投稿2016/10/19 14:22
編集2016/10/19 14:23
退会済みユーザー
総合スコア0
0
自己解決
reactを使ってみたら解決しました
投稿2016/10/31 02:09
総合スコア293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。