상단고정 팝업 만들기.

상단에 고정된(fixed) 배너를 만든다.

클래스 topBanner 를 변경해서 사용하면 된다.

//-------------------------------------------------------------------------------------------------------------------------------------------------

// 문서가 준비되면

$(document).ready(function(){

// closeBtn을 클릭하면

$(".closeBtn").on("click", function() {

// topBanner를 사라지게 한다.

$(".topBanner").slideUp();

});

});

 

  <style>

body{margin: 0; padding: 0;}

/* 상단 배너 */

.topBanner {

  background: white;

  margin: 0; padding: 0;

  position: fixed;

  width: 100%;

  height: 100px;

  border-bottom:1px solid red;

  text-align:center;

}

/* 닫기버튼 */

.closeBtn{

border:1px solid black;

position: relative;

float:right;

top: 70px;

right:15px;

cursor:pointer;

}

  </style>

 <div class="topBanner"> 

banner

<div class="closeBtn">X</div>

 </div>

 

 <div id="content">

본문

<br/>

<br/>

<br/>

<br/>

본문

<br/>

<br/>

<br/>

<br/>

본문

 </div>

//-------------------------------------------------------------------------------------------------------------------------------------------------