Chrome37에서 HTML5의 Dialog 요소를 사용해 보았습니다.

Chrome37에서 HTML5 DIALOG 지원 라는 소문을 들었으므로 시험해 보았다.
Dialog 요소에 대한 자세한 내용은 여기을 참조하십시오.

Chrome 확장으로 Javascript의 Prompt를 사용하고 있는 것이 있고, 타이밍적으로 HTML화하고 싶다고 생각했던 것이 있었으므로 그것을 Dialog로 치환.
Chrome용의 확장이라고 하는 것으로, 다른 브라우저로 움직일 필요가 없기 때문에 재료적으로는 딱 좋은 것이지만, 아직 37은 베타이므로 배포 개시의 타이밍이 헤매는 곳.

그래서 완성은 이런 느낌. Gmail에 추가하여 표시해 보았습니다.



소스 흐름은

jQuery로 Dialog 부분의 HTML 조립

jQuery로 만든 Dialog를 Body에 Append

Chrome 내장 JS에서 Dialog를 표시

라는 느낌. (3.에서 jQuery를 통해 Dialog를 show해도 Dialog가 열리지 않으므로주의 ←)

Dialog 부분은 순수한 HTML이므로 아이콘도 붙일 수 있고, 물론 CSS로 세세하게 만들어 넣을 수도 있다.

Dialog를 표시하는 라이브러리도 여러 가지 있지만, Chrome에서 지원되어 기쁜 것은 다른 라이브러리와 충돌하지 않는다는 점이라고 생각한다. 특히 JS 바리바리 서비스에 Chrome 확장 기능을 추가할 때 뭔가는 CSS 하나 매우 부딪힐 가능성이 있다.

외부 라이브러리를 사용하지 않고 처음부터 다이얼로그를 표시시키는 손도 있지만, Modal로 하거나 화면의 중앙에 표시하거나 하는 것을 자동으로 해 준다는 것은 그것만으로도 상당한 편리함.

라고 해도, 편리했던 것은 그 정도. 이번은 그 밖에 BootStrap도 사용했다는 것도 있어, 결국 그쪽의 CSS를 계승해 버리기 때문에 상당히 세세하게 스타일을 맞추어야 하지 않았다.

이곳은 Polymer가 실용화되기를 기다릴 수밖에 없을까?

원본은 게시물 ぉ tp // ぉ う ps. 하나 mblr. 코 m/포 st/92621376146/ch 로메 37-html5-ぢ아ぉg입니다.

이 Chrome 확장에 관심이 있으시면 ぉ tp // ぉ う ps. 기주 b. 이오 / 레센 d 메 r /까지 문의하십시오.