무아지경

window.open() 팝업창 띄우기 본문

퍼블리싱/HTML5 + CSS3

window.open() 팝업창 띄우기

블리셔 2018. 7. 5. 18:01

첫번째 방법

  • - 기본형식 : window.open([URL],[name],[option],[replace])
  • - [URL] : 새 창의 url주소. 만약 지정하지 않으면 빈 창이 뜸
  • - [name] : 새창의 이름을 입력하거나 target 속성을 명시할 수 있다.
  • - target 속성은 "_blank", "_parent", "_self", "top"이 있고
      "_blank"가 default임. - [option] : 새창에 대한 특성, ","로 구분해서 나열함
width=pixels the width of the window. Min. Balue is 100
height=pixels the height of the window. min. value is 100
top=pixels The top position of the window. Negative balues not allowed
left=pixels The left position of the window. Negative balues not allowed
location=yes|no|1|0 whether or not to display the address field. opera only
menubar=yes|no|1|0 whether or not to display the menu bar
resizable=yes|no|1|0 Whether or not the window is resizable. IE only
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE,Firefox & Opera only
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only
channelmode=yes|no|1|0 whether or not to display the window in theater mode. Default is no. IE only
directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes IE only
fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode nust also be in theater mode. IE only

예를 들면

1
<a href="#none" onclick="window.open('URL','new','scrollbars=yes,resizable=no width=200 height=250, left=0,top=0');return false"></a>
cs



두번째 방법

1
2
3
4
5
<script>
    function openPopup(){
        window.open("modHistory_pop.html""new""toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=700, height=700, left=0, top=0" );
    }
</script>
cs

1
<a href="#none" onclick="openPopup()">

다음 새창 띄우기 ◀ 클릭

'퍼블리싱 > HTML5 + CSS3' 카테고리의 다른 글

display:table / display:table-cell 속성  (0) 2018.07.13
a링크 #none / javascript:void(0)  (0) 2018.07.13
유튜브 동영상 반응형  (0) 2018.07.05
border-radius  (0) 2018.05.30
button 디자인시 유의할 점  (0) 2018.05.30
Comments