loading 을 구현하기 위해 background 가 투명하게 바뀌면서 클릭을 못하게 막으면서
loading 이미지가 뜨는 페이지를 만들기 위해 jquery 의 플러그인을 이용해 보았다.
플러그인을 받은 경로는
http://www.ericmmartin.com/projects/simplemodal-demos/
이고 소스 코드는 아래와 같다.
1. div 영역을 만들어 준다.(이미지가 안보이도록 style='display:none' 처리를 해준다.)
2. 자바스크립트로 modal 함수를 불러서 modal 을 실행 시키면 된다.
상세 옵션은 위의 링크에서 확인 하면 되지만 일단 로딩 화면만 구현하기 위해서는
아래에 있는 소스만으로 충분 할 것으로 보인다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/spring_sample/css/style.css" type="text/css">
<link rel="stylesheet" href="/spring_sample/css/contact.css" type="text/css">
<script src="/spring_sample/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/spring_sample/js/contact.js" type="text/javascript"></script>
<script src="/spring_sample/js/jquery.simplemodal.js" type="text/javascript"></script>
<script language="javascript">
function sub(){
$("#loading_modal").modal({
opacity:50,
overlayCss: {backgroundColor:"#000"}
});
}
</script>
</head>
<body>
<form>
<input type="button" value="modal_test" onclick="sub();">
</form>
<div style='display:none' id="loading_modal">
<img src='/spring_sample/images/loading.gif' alt='loading' />
</div>
</body>
</html>
댓글