https://plas.soka.ac.jp/csp/plas/library/bootstrap/v4-beta/dist/js/bootstrap-override.js

1/***********************************
2	bootstrapの抽象化ファイル
3 ***********************************/
4
5var bs={};
6bs.lang=$("html").attr("lang");	// htmlタグのlang属性を取得	jp:日本語 en:英語
7
8//---------------------------------
9//	alert
10//---------------------------------
11// 使い方
12// alertを表示したい箇所で「 bs.alert("xxxx")； 」と記述する。
13//---------------------------------
14
15bs.alert = {};
16
17// アラート表示
18bs.alert = function(message){
19	bs.alert.id="wrapper-alert";
20	bs.alert.makeObj(message);	// アラート用DOM作成
21	$('#'+bs.alert.id).modal();	// アラートを画面に表示する
22}
23
24// アラート用DOM作成
25/*----------------------------------------------------
26<div class="modal fade" id="myModal2" tabindex="-1">
27	<div class="modal-dialog">
28		<div class="modal-content">
29			<div class="modal-body">
30				<span>Message</span>
31			</div>
32			<div class="modal-footer">
33				<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
34			</div>
35		</div>
36	</div>
37</div>
38----------------------------------------------------*/
39bs.alert.makeObj = function(message){
40	
41	// アラートDOM存在チェック
42	if($("#"+bs.alert.id)[0]){
43		// 既にDOM作成済みはメッセージのみ変更して処理終了
44		$("#"+bs.alert.id+" .modal-message").text(message);
45		return false;
46	}
47	
48	// HTMLタグのlang属性で言語を判定し、閉じるボタンの名称コントロール
49	var closeText=(bs.lang=="en")?"Close":"閉じる";
50	
51	// DOM生成
52	var obj1=$("<div>",{id:bs.alert.id,tabindex:-1,addClass:"modal fade"});
53	var obj2=$("<div>",{addClass:"modal-dialog"});
54	var obj3=$("<div>",{addClass:"modal-content"});
55	var obj4=$("<div>",{addClass:"modal-body"}).append("<span class='modal-message'>"+message+"</span>");
56	var obj5=$("<div>",{addClass:"modal-footer"});
57	var obj6=$("<button>",{type:"button",class:"btn btn-secondary","data-dismiss":"modal",text:closeText});
58	var tmp="";
59	tmp=obj5.append(obj6);
60	tmp=obj3.append(obj4,tmp);
61	tmp=obj2.append(tmp);
62	tmp=obj1.append(tmp);
63	// Bodyタグに配置
64	$("body").append(tmp);
65}
66
67
68//---------------------------------
69//	modal
70//---------------------------------
71// モーダル表示
72// 引数
73// title		:モーダルの表示タイトル	(HTML形式)
74// message		:表示コンテンツ		(HTML形式)
75// btnObj		:ボタンオブジェクト		(jQueryオブジェクト)
76// closeBtnFlg	:閉じるボタン表示非表示(1:表示 0:非表示)
77bs.modal = function(title,message,btnObj,closeBtnFlg){
78	bs.modal.id="wrapper-modal";
79	bs.modal.makeObj(title,message,btnObj,closeBtnFlg);	// アラート用DOM作成
80	$('#'+bs.modal.id).modal({backdrop:"static"});	// アラートを画面に表示する
81}
82
83// モーダル用DOM作成
84/*----------------------------------------------------
85// 自動でこのHTMLが生成される。
86<div class="modal fade" id="myModa" tabindex="-1">
87	<div class="modal-dialog">
88		<div class="modal-content">
89			<div class="modal-header">
90				<h5 class="modal-title">タイトル</h5>
91				<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
92					<span aria-hidden="true">&times;</span>
93				</button>
94			</div>
95			<div class="modal-body">
96				<p>モーダルのコンテンツ文。</p>
97			</div>
98			<div class="modal-footer">
99				<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
100				<button type="button" class="btn btn-primary">変更を保存</button>
101			</div>
102		</div>
103	</div>
104</div>
105----------------------------------------------------*/
106bs.modal.makeObj = function(titleText,message,btnObj,closeBtnFlg){
107	
108	// アラートDOM存在する場合は、一旦削除
109	var wrapper=$("#"+bs.modal.id)[0]
110	if(wrapper){
111		wrapper.parentNode.removeChild(wrapper);
112	}
113	
114	// HTMLタグのlang属性で言語を判定し、閉じるボタンの名称コントロール
115	var closeText=(bs.lang=="en")?"Close":"閉じる";
116	
117	// DOM生成
118	var wrapper=$("<div>",{id:bs.modal.id,tabindex:-1,addClass:"modal fade"});
119	var dialog	=$("<div>",{addClass:"modal-dialog"});
120	var content	=$("<div>",{addClass:"modal-content"});
121	var header	=$("<div>",{addClass:"modal-header"});

122	var title	=$("<h5>",{addClass:"modal-title"}).append(titleText);
123	var timesBtn=$("<button>",{type:"button",class:"close","data-dismiss":"modal"});
124	var times	=$("<span aria-hidden='true'>&times;</span>");
125	var p		=$("<p>",{addClass:"modal-message"}).append(message);
126	var body	=$("<div>",{addClass:"modal-body"}).append(p);
127	var footer	=$("<div>",{addClass:"modal-footer"});
128	var close	=$("<button>",{type:"button",class:"btn btn-secondary","data-dismiss":"modal",text:closeText});
129	
130	if(closeBtnFlg==0){
131		close="";
132	}
133	
134	var tmp="",tmpHeader="";
135	timesBtn=timesBtn.append(times);
136	header	=header.append(title,timesBtn);
137	if(btnObj){
138		for(var i=0; i < btnObj.length; i++){
139			footer	=footer.append(btnObj[i]);
140		}
141	}
142	footer	=footer.append(close);
143	if(titleText!=""){
144		tmp	=content.append(header);
145	}
146	tmp		=content.append(body,footer);
147	tmp		=dialog.append(tmp);
148	tmp		=wrapper.append(tmp);
149	// Bodyタグに配置
150	$("body").append(tmp);
151}
152// モーダル非表示
153bs.modal.close=function(){
154	$('#'+bs.modal.id).modal("hide");	
155}
156