자바스크립트 히든 버튼 만들기

HTML, CSS, 자바스크립트 코드를 사용해 히든 버튼이 X초 후에 나타나도록 만들 수 있습니다. 아래 코드는 비주얼 섹션에서는 작동하지 않습니다. 비주얼 섹션에 히든 버튼을 추가하려면, 버튼 ID 앞에 비주얼 섹션 ID 넘버가 추가되어야 합니다.

1단계, 코드 편집하기

전체 코드는 우측과 같습니다. 코드는 크게 <style>로 시작하는 CSS, <p>로 시작하는 HTML, <script>로 시작하는 자바스크립트 3가지로 구성되어 있습니다. 그중 우리가 신경쓸 부분은 파란색으로 하이라이트된 값들입니다.


1) left : 버튼의 위치를 left, center, right 3가지 중 하나를 쓸 수 있습니다.

2) bold : 버튼 텍스트의 두께를 정할 수 있습니다. normal로 바꾸면 기본으로 돌아갑니다.

3) 도메인 : 버튼을 클릭하면 특정 페이지로 이동합니다.

4) 버튼 텍스트 : 버튼 텍스트를 입력할 수 있습니다.

5) 3000 : 1000당 1초라고 생각하시면 되겠습니다. 3초면 3000으로 입력합니다.

<style>

  #hiddenBlock {

    display: none;

}

</style>


<p style="text-align: left;">

          <a style="font-weight: bold;" class="btn btn-primary btn-lg" href="http://도메인" id="hiddenBlock">버튼 텍스트</a>

</p>


<script type="text/javascript">

          $(document).ready(function(){setTimeout(function(){$('#hiddenBlock').show()},3000)});

</script>

2단계, 코드 위젯에 추가하기

디자인 모드에서 코드 위젯을 추가한 다음 편집한 코드를 붙여 넣습니다. 끝으로 게시하기를 눌러 테스트해보세요.

상단이동