Demo
SeedModal은 간편하게 모달팝업을 표현할 수 있습니다. 웹 사이트 제작시 SeedModal을 사용해 보세요.
Theme
SeedModal은 다양한 테마의 모달팝업을 제공 합니다. 웹 사이트 제작시 SeedModal을 사용해 보세요.
Support Browser
SeedModal은 다양한 브라우저를 지원 합니다. 아래의 지원 브라우저를 확인 하세요.
Download
SeedModal 라이브러리를 다운로드 하세요.
Manual
SeedModal 메뉴얼을 다운로드 하세요.
라이브러리 추가
Header 영역에 내려받은 SeedModal을 포함 시키세요.
<!-- css -->
<link rel="stylesheet" type="text/css" href="/resources/library/seedmodal/seedmodal.min.css" />
<!-- script -->
<script type="text/javascript" src="/resources/library/seedmodal/seedmodal.min.js"></script>
모달팝업 객체 생성
Javascript 영역에 SeedModal 객체를 생성 하세요.
// 객체 생성
var seedModal = new SeedModal();
seedModal.setConfig({
smTheme: "sm_theme1", // 테마
smTop: "center", // 위치(Top)
smLeft: "middle", // 위치(Left)
smWidth: "640", // 너비
smHeight: "260", // 높이
smTitle: "모달팝업" // 제목
});
모달팝업 예제
Javascript 영역에 SeedModal의 modal 함수를 호출하는 이벤트를 작성 하세요.
// Modal 버튼 클릭 이벤트
$(document).on("click", "#Modal", function () {
seedModal.modal(
seedModal,
{
smWidth: "640",
smHeight: "260",
smTitle: "모달팝업",
smUrl: "/Iframe/SaveData"
}
);
});
