material-modal Examples


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

		<style>
			#materialModal{
				font-family:roboto;
				color:#222;
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				height:100%;
				background:rgba(0,0,0,0.5);
				display:table;
				z-index:1000;
			}
			#materialModalCentered{
				display:table-cell;
				vertical-align:middle;
			}
			#materialModalContent{
				padding:10px;
				position:relative;
				background:white;
				width:400px;
				min-height:200px;
				margin:auto;
				box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);
				box-sizing:border-box;
			}
			#materialModalTitle{
				margin:10px;
				font-weight:bold;
				font-size:1.2em;
			}
			#materialModalText{
				margin:10px;
				margin-bottom:40px;
			}
			#materialModalButtons{
				width:calc(100% - 20px);
				position:absolute;
				bottom:0px;
			}
			.materialModalButton{
				margin:10px;
				font-weight:bold;
				cursor:pointer;
				text-align:center;
				float:right;
				text-transform:uppercase;
				padding:10px;
			}
			#materialModal.hide{
				opacity:0;
				transition:opacity 0.2s ease-out;
				pointer-events:none;
			}
			#materialModal.hide #materialModalCentered{
				transform:scale(0);
				transition:transform 0.2s ease-out;
			}
			#materialModal.show{
				opacity:1;
				transition:opacity 0.2s ease-in;
			}
			#materialModal.show #materialModalCentered{
				transform:scale(1);
				transition:transform 0.2s ease-in;
			}
		</style>
		<script>
			materialCallback = null;
			function materialAlert( title, text, callback ){
				document.getElementById('materialModalTitle').innerHTML = title;
				document.getElementById('materialModalText').innerHTML = text;
				document.getElementById('materialModalButtonCANCEL').style.display = 'none';
				document.getElementById('materialModal').className = 'show';
				materialCallback = callback;
			}
			function materialConfirm( title, text, callback ){
				materialAlert( title, text, callback );
				document.getElementById('materialModalButtonCANCEL').style.display = 'block';
			}
			function closeMaterialAlert(e, result){
				e.stopPropagation();
				document.getElementById('materialModal').className = 'hide';
				if(typeof materialCallback == 'function') materialCallback(result);
			}
		</script>
    <title>material-modal Examples</title>
	</head>
	<body>
    
	<h1>material-modal Examples</h1>
      		
		<div id="materialModal" onclick="closeMaterialAlert(event, false)" class="hide">
			<div id="materialModalCentered">
				<div id="materialModalContent" onclick="event.stopPropagation()">
					
					<div id="materialModalTitle">
						This is the title
					</div>
					
					<div id="materialModalText">
						This is the content<br/>
					</div>
					
					<div id="materialModalButtons">
					<div id="materialModalButtonOK" class="materialModalButton" onclick="closeMaterialAlert(event, true)">
						확 인 
					</div>
					<div id="materialModalButtonCANCEL" class="materialModalButton" onclick="closeMaterialAlert(event, false)">
						취 소 
					</div>
					</div>
				</div>
			</div>
		</div>

		<button onclick="materialConfirm('','[휴대폰]02222222222<br/>[이메일]dhdhdhdk@Dfdfdf.co.kr<br/>[탑승객]의 이름,성별과 생년월일을 정확히 입력하셨는지 확인 해 주시기 바랍니다.<br/> 예약확인 후 변경 불가.',function(result){console.log(result)})">Show confirm</button>
		
	</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!doctype html>

<html>

<head>

<style>

#materialModal{

font-family:roboto;

color:#222;

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

background:rgba(0,0,0,0.5);

display:table;

z-index:1000;

}

#materialModalCentered{

display:table-cell;

vertical-align:middle;

}

#materialModalContent{

padding:10px;

position:relative;

background:white;

width:400px;

min-height:200px;

margin:auto;

box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);

box-sizing:border-box;

}

#materialModalTitle{

margin:10px;

font-weight:bold;

font-size:1.2em;

}

#materialModalText{

margin:10px;

margin-bottom:40px;

}

#materialModalButtons{

width:calc(100% - 20px);

position:absolute;

bottom:0px;

}

.materialModalButton{

margin:10px;

font-weight:bold;

cursor:pointer;

text-align:center;

float:right;

text-transform:uppercase;

padding:10px;

}

#materialModal.hide{

opacity:0;

transition:opacity 0.2s ease-out;

pointer-events:none;

}

#materialModal.hide #materialModalCentered{

transform:scale(0);

transition:transform 0.2s ease-out;

}

#materialModal.show{

opacity:1;

transition:opacity 0.2s ease-in;

}

#materialModal.show #materialModalCentered{

transform:scale(1);

transition:transform 0.2s ease-in;

}

</style>

materialCallback = null;

function materialAlert( title, text, callback ){

document.getElementById('materialModalTitle').innerHTML = title;

document.getElementById('materialModalText').innerHTML = text;

document.getElementById('materialModalButtonCANCEL').style.display = 'none';

document.getElementById('materialModal').className = 'show';

materialCallback = callback;

}

function materialConfirm( title, text, callback ){

materialAlert( title, text, callback );

document.getElementById('materialModalButtonCANCEL').style.display = 'block';

}

function closeMaterialAlert(e, result){

e.stopPropagation();

document.getElementById('materialModal').className = 'hide';

if(typeof materialCallback == 'function') materialCallback(result);

}

</script>

<title>material-modal Examples</title>

</head>

<body>

<h1>material-modal Examples</h1>

This is the title

</div>

This is the content<br/>

</div>

확 인

</div>

취 소

</div>

<button onclick="materialConfirm('','[휴대폰]02222222222<br/>[이메일]dhdhdhdk@Dfdfdf.co.kr<br/>[탑승객]의 이름,성별과 생년월일을 정확히 입력하셨는지 확인 해 주시기 바랍니다.<br/> 예약확인 후 변경 불가.',function(result){console.log(result)})">Show confirm</button>

</body>

</html>