팝업 Large 좌우 분할 <button class="btn gLine" onclick="openPopup('sample01')">Open</button> <!-- 팝업 영역 --> <div id="sample01" class="modPopup lg"> <!-- class - on : 팝업오픈 --> <div class="popupDim">딤영역</div> <div class="popupArea"> <!-- style - 너비값(width), 높이값(height) : 팝업 너비 및 높이 지정 --> <div class="popupInMotion"> <div class="popupContainer"> <div class="popupContArea"> <button class="btnPopClose" onclick="closePopup('sample01');">닫기</button> <div class="popTitle">상세내역</div> <div class="popCont"> <!-- 팝업 컨텐츠 영역 --> <div class="modDivision"> <div class="dvsItem"> 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 좌측영역 </div> <div class="dvsItem"> 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 우측영역 </div> </div> <!-- //팝업 컨텐츠 영역 --> </div> <div class="popBtm division"> <div class="align"> <button class="btn dkBlue">버튼</button> </div> <div class="align"> <button class="btn red">삭제</button> <button class="btn gLine">취소</button> <button class="btn dkBlue">저장</button> </div> </div> </div> </div> </div> </div> </div> <!-- //팝업 영역 --> 팝업 Large <button class="btn gLine" onclick="openPopup('sample01')">Open</button> <!-- 팝업 영역 --> <div id="sample01" class="modPopup lg"> <!-- class - on : 팝업오픈 --> <div class="popupDim">딤영역</div> <div class="popupArea"> <!-- style - 너비값(width), 높이값(height) : 팝업 너비 및 높이 지정 --> <div class="popupInMotion"> <div class="popupContainer"> <div class="popupContArea"> <button class="btnPopClose" onclick="closePopup('sample01');">닫기</button> <div class="popTitle">상세내역</div> <div class="popCont"> <!-- 팝업 컨텐츠 영역 --> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다. <!-- //팝업 컨텐츠 영역 --> </div> <div class="popBtm division"> <div class="align"> <button class="btn dkBlue">버튼</button> </div> <div class="align"> <button class="btn red">삭제</button> <button class="btn gLine">취소</button> <button class="btn dkBlue">저장</button> </div> </div> </div> </div> </div> </div> </div> <!-- //팝업 영역 --> 팝업 Midume <button class="btn gLine" onclick="openPopup('sample02')">Open</button> <!-- 팝업 영역 --> <div id="sample02" class="modPopup md"> <!-- class - on : 팝업오픈 --> <div class="popupDim">딤영역</div> <div class="popupArea"> <!-- style - 너비값(width), 높이값(height) : 팝업 너비 및 높이 지정 --> <div class="popupInMotion"> <div class="popupContainer"> <div class="popupContArea"> <button class="btnPopClose" onclick="closePopup('sample02');">닫기</button> <div class="popTitle">상세내역</div> <div class="popCont"> <!-- 팝업 컨텐츠 영역 --> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다. <!-- //팝업 컨텐츠 영역 --> </div> <div class="popBtm"> <button class="btn gLine">취소</button> <button class="btn dkBlue">저장</button> </div> </div> </div> </div> </div> </div> <!-- //팝업 영역 --> 팝업 Small <button class="btn gLine" onclick="openPopup('sample03')">Open</button> <!-- 팝업 영역 --> <div id="sample03" class="modPopup sm"> <!-- class - on : 팝업오픈 --> <div class="popupDim">딤영역</div> <div class="popupArea"> <!-- style - 너비값(width), 높이값(height) : 팝업 너비 및 높이 지정 --> <div class="popupInMotion"> <div class="popupContainer"> <div class="popupContArea"> <button class="btnPopClose" onclick="closePopup('sample03');">닫기</button> <div class="popTitle">상세내역</div> <div class="popCont"> <!-- 팝업 컨텐츠 영역 --> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다.<br/> 팝업영역입니다. <!-- //팝업 컨텐츠 영역 --> </div> <div class="popBtm"> <button class="btn gLine">취소</button> <button class="btn dkBlue">저장</button> </div> </div> </div> </div> </div> </div> <!-- //팝업 영역 -->