사용자:Hsl0/연구소/4: 두 판 사이의 차이
imported>Hsl0 편집 요약 없음 |
imported>Hsl0 편집 요약 없음 |
||
| (같은 사용자의 중간 판 5개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{#css: | {{#css:사용자:Hsl0/연구소/2.css}} | ||
{{pluginX|../3.js}} | {{pluginX|../3.js}} | ||
<onlyinclude><span class="popuplink"><span class="popuplink-label" {{boolean|{{{자동닫기|false}}}|data-autoclose}}>{{{라벨|{{{1|{{{라벨}}}}}}}}}</span><div class="popuplink-content">{{{내용|{{{2|{{{내용}}}}}}}}}</div>{{#ifeq:{{{제목|#null}}}|{{{제목|#nil}}}|<span class="popuplink-header">{{{제목}}}</span>}}</span></onlyinclude> | |||
누르면 팝업 메시지가 튀어나오는 링크를 생성합니다. | |||
* | == 사용법 == | ||
* | ; 권장 사용법 | ||
* | <pre> | ||
* | {{팝업 | ||
|라벨=(문자열) | |||
|제목=(문자열) | |||
|내용=(문자열) | |||
|자동닫기=(부울) | |||
}} | |||
</pre> | |||
; 축약 사용법 | |||
<pre>{{팝업|(라벨)|(내용)}}</pre> | |||
* 라벨: 링크로 표시될 텍스트 | |||
* 제목: 팝업의 머리글에 표시될 제목 | |||
* 내용: 팝업에 표시될 내용 | |||
* 자동닫기: 팝업 바깥쪽을 누를 때 닫힘 여부 ([[틀:boolean|부울]]) | |||
== 예시 == | |||
<pre> | |||
* {{팝업|눌러보세요|이렇게 팝업이 뜹니다. 닫으려면 윗쪽의 X버튼이나 링크를 다시 눌러주세요.}} | |||
* {{팝업 | |||
|라벨=이것도 눌러보세요 | |||
|제목=팝업이다 | |||
|내용=이렇게 제목을 설정할 수 있습니다. 팝업 밖을 눌러서 닫아보세요. | |||
|자동닫기=true | |||
}} | |||
* {{팝업 | |||
|라벨=눌러봐 | |||
|내용=자동닫기가 켜져 있고 제목이 없으면 머리글이 숨겨져 더 단순해집니다. | |||
|자동닫기=1 | |||
}} | |||
</pre> | |||
* {{팝업|눌러보세요|이렇게 팝업이 뜹니다. 닫으려면 윗쪽의 X버튼이나 링크를 다시 눌러주세요.}} | |||
* {{팝업 | |||
|라벨=이것도 눌러보세요 | |||
|제목=팝업이다 | |||
|내용=이렇게 제목을 설정할 수 있습니다. 팝업 밖을 눌러서 닫아보세요. | |||
|자동닫기=true | |||
}} | |||
* {{팝업 | |||
|라벨=눌러봐 | |||
|내용=자동닫기가 켜져 있고 제목이 없으면 머리글이 숨겨져 더 단순해집니다. | |||
|자동닫기=1 | |||
}} | |||
2021년 7월 28일 (수) 01:31 기준 최신판
/**
* @requires oojs-ui-widgets
* @requires ext.gadget.Tasker
**/
registerRenderer(function createPopupButton() {
$('.popuplink').each(function() {
var $header = $(this).find('.popuplink-header');
var widget = new OO.ui.PopupButtonWidget({
label: $(this).find('.popuplink-label'),
framed: false,
popup: {
head: $header.length || !('autoclose' in this.dataset),
padded: true,
autoClose: 'autoclose' in this.dataset,
label: $header,
$content: $(this).find('.popuplink-content')
}
});
$(this).html(widget.$element);
});
});
{{{라벨}}}{{{내용}}}
누르면 팝업 메시지가 튀어나오는 링크를 생성합니다.
사용법[편집 | 원본 편집]
- 권장 사용법
{{팝업
|라벨=(문자열)
|제목=(문자열)
|내용=(문자열)
|자동닫기=(부울)
}}
- 축약 사용법
{{팝업|(라벨)|(내용)}}
- 라벨: 링크로 표시될 텍스트
- 제목: 팝업의 머리글에 표시될 제목
- 내용: 팝업에 표시될 내용
- 자동닫기: 팝업 바깥쪽을 누를 때 닫힘 여부 (부울)
예시[편집 | 원본 편집]
* {{팝업|눌러보세요|이렇게 팝업이 뜹니다. 닫으려면 윗쪽의 X버튼이나 링크를 다시 눌러주세요.}}
* {{팝업
|라벨=이것도 눌러보세요
|제목=팝업이다
|내용=이렇게 제목을 설정할 수 있습니다. 팝업 밖을 눌러서 닫아보세요.
|자동닫기=true
}}
* {{팝업
|라벨=눌러봐
|내용=자동닫기가 켜져 있고 제목이 없으면 머리글이 숨겨져 더 단순해집니다.
|자동닫기=1
}}