탈

크롬 알림처럼 띄워보기

[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개

allow deny 를 허용 거절로 바꾸고 기능을 추가하셔야 합니다.
감사합니다~ 이거를 어디에 어떻게 쓸 수 있어요?
저는 쿠키 동의에 이용하고 있습니다.
엄청 필요했는데 감사합니다
유용한 팁이네요! ^^ 정말 감사합니다 :)
굿밤 되세요~!
감사합니다 ~ 이쁜알림 이네요 ^^
감사합니다~
예시가 안보이는데 캡쳐 화면으로 볼 수 있는 방법이 있을까요?
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
18-10-28 조회 8,543
18-10-28 조회 7,129
18-10-28 조회 7,409
18-10-24 조회 1만
18-10-23 조회 1.5만
18-10-22 조회 1.2만
18-10-21 조회 8,666
18-10-21 조회 8,060
18-10-20 조회 7,980
18-10-18 조회 8,934
18-10-17 조회 9,652
18-10-15 조회 8,187
18-10-14 조회 1.4만
18-10-12 조회 1.8만
18-10-10 조회 8,414
18-10-10 조회 9,469
18-10-10 조회 6,955
18-10-08 조회 7,398
18-10-08 조회 1.2만
18-10-06 조회 1만
18-10-04 조회 1.6만
18-10-03 조회 8,972
18-10-02 조회 8,734
18-10-02 조회 7,918
18-09-29 조회 7,456
18-09-28 조회 8,951
18-09-21 조회 1.2만
18-09-20 조회 1.1만
18-09-17 조회 9,118
18-09-13 조회 9,353