크롬 알림처럼 띄워보기

· 2018-10-28 (일) 21:03:27 · 6741 · 8

[code]

<div style="color: rgb(0, 0, 0); direction: ltr; text-align: left; box-sizing: border-box; background: rgb(255, 255, 255); padding: 4px 16px 20px; border: 1px solid rgb(204, 204, 204); border-radius: 2px; width: 320px; height: 128px; top: 7px; left: 55px; z-index: 2147483647 !important; position: fixed !important;"> <span style="display: block; position: absolute; top: -16px; left: 16px; width: 0; height: 0; border-style: solid; border-color: transparent transparent rgb(204, 204, 204) transparent; border-width: 8px;"></span> <span style="display: block; position: absolute; top: -15px; left: 16px; width: 0; height: 0; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 8px;"></span> <p style="line-height: 14px; padding: 0; margin: 14px 0 10px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">4.ottk.net website wants to</p><p style="line-height: 13px; padding: 0; margin-top: 10px; font-size: 13px; font-family: Arial, Helvetica, sans-serif;"> <img style="vertical-align: text-bottom" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAP9JREFUOMvNkD1OAzEQhd9YMYIiokwHUhq4ABIpIyhRuhWyx1uk4ggcgIZ7sFgbbYfouQAXoKGgo6RD2l0PTYrVksQmQojX+c3zNz/AX8kYM2Hm01huEAsQ0Y2IAMD5xty6AjOfiMg1gIul9RhCuC3L8jkZ5JybhRAWAHZ7pU+l1GVRFA9RUJZl+1rrFwCjNcO+13V9VFXVR9dU/ZTW+mwDBABGWutZ31QrgseI6zAFtJMAGqSAttI/B+V5fgAgT/g3t9aOuwZ1IW3bPgEYJ4AA4A3A1Hv/CnSu3zTNkIiufrKOiOx9m2iVjDGOiO6WT+e9v9/2hmStZWa2saa/pi8tSkAI6iwUjgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wMS0yM1QwOTo1NTowMyswMDowMMgvqtEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDEtMjNUMDk6NTU6MDMrMDA6MDC5chJtAAAAKHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy90bXAvbWFnaWNrLV8zOWFJQVBTZGL86AAAAABJRU5ErkJggg=="> Show notification</p><div style="position: absolute; bottom: 20px; right: 20px;"><button style="display: inline-block; height: 32px; text-transform: none; box-shadow: none; border-radius: 2px; outline: none; padding: 8px 13px; transition: all 0.2s ease 0s; cursor: pointer; line-height: 1; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; background: rgb(77, 144, 254); color: rgb(255, 255, 255); border: 1px solid rgb(48, 121, 237); margin: 0px 8px 0px 0px;" type="button" name="allow" onmouseover="this.style.border='1px solid #2f5bb7'" onmouseout="this.style.border='1px solid #3079ed'" class="sdltkks6377864">Allow</button><button style="display: inline-block; height: 32px; text-transform: none; box-shadow: none; -webkit-box-shadow: none; border-radius: 2px; outline: none; padding: 8px 13px; transition: .2s; cursor: pointer; line-height: 1; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; background-color: #f5f5f5; color: #444; border: 1px solid rgba(0,0,0,0.1); margin: 0;" type="button" name="deny" class="kgnsut4927628">Deny</button></div></div>

[/code]

예시는 링크 1을 참조하세요

|

댓글 8개

2018-10-28 (일) 21:04:06
allow deny 를 허용 거절로 바꾸고 기능을 추가하셔야 합니다.
2018-10-29 (월) 04:02:30
감사합니다~ 이거를 어디에 어떻게 쓸 수 있어요?
2018-10-31 (수) 21:07:12
저는 쿠키 동의에 이용하고 있습니다.
엄청 필요했는데 감사합니다
유용한 팁이네요! ^^ 정말 감사합니다 :)
굿밤 되세요~!
2018-11-19 (월) 19:40:48
감사합니다 ~ 이쁜알림 이네요 ^^
2020-05-29 (금) 15:24:51
감사합니다~
2022-02-05 (토) 16:52:16
예시가 안보이는데 캡쳐 화면으로 볼 수 있는 방법이 있을까요?
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
18-11-27 조회 1.1만
18-11-26 조회 8,308
18-11-26 조회 7,689
18-11-26 조회 7,787
18-11-26 조회 8,579
18-11-25 조회 8,456
18-11-25 조회 5,685
18-11-23 조회 6,482
18-11-23 조회 8,774
18-11-23 조회 7,890
18-11-23 조회 1.1만
18-11-21 조회 8,312
18-11-19 조회 6,589
18-11-18 조회 6,269
18-11-17 조회 7,423
18-11-17 조회 6,061
18-11-15 조회 5,735
18-11-14 조회 6,043
18-11-11 조회 8,605
18-11-11 조회 6,824
18-11-10 조회 6,543
18-11-04 조회 7,095
18-11-01 조회 6,934
18-11-01 조회 6,291
18-10-31 조회 8,345
18-10-29 조회 8,839
18-10-28 조회 6,742
18-10-28 조회 5,349
18-10-28 조회 5,607
18-10-24 조회 8,437