Sweetalert: ์—ฌ๋Ÿฌ ํ…์ŠคํŠธ ํ–‰์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2017๋…„ 10์›” 08์ผ  ยท  9์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: t4t5/sweetalert

์•ˆ๋…•ํ•˜์„ธ์š”
์—ฌ๋Ÿฌ ํ–‰์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ html์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‹ค์Œ์€ https://sweetalert.js.org/docs/#content๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ํ•ดํ‚น์ž…๋‹ˆ๋‹ค

var span = document.createElement("span");
span.innerHTML='abc<br>efg'
swal({
  content: span,
});

๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  9 ๋Œ“๊ธ€

๋‹ค์Œ์€ https://sweetalert.js.org/docs/#content๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ํ•ดํ‚น์ž…๋‹ˆ๋‹ค

var span = document.createElement("span");
span.innerHTML='abc<br>efg'
swal({
  content: span,
});

๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

์ง€๊ธˆ์€ @simon1tan ์˜ ๋ฐฉ์‹์ด ๊ฐˆ ๊ธธ์ด์ง€๋งŒ ์ค„ ๋ฐ”๊ฟˆ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ์ž‘์—…์—๋Š” ์•ฝ๊ฐ„ ์ง€๋ฃจํ•˜๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์€ SweetAlert๊ฐ€ ํ…์ŠคํŠธ ์˜ต์…˜์—์„œ \n ๋ฌธ์ž๋ฅผ <br> ํƒœ๊ทธ๋กœ ์ž๋™ ๊ต์ฒดํ•˜์—ฌ ์‚ฌ๋žŒ๋“ค์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

swal("Hello\nthere!")

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ์ด ์žˆ์œผ๋ฉด(๋งค์šฐ ๊ฐ„๋‹จํ•ด์•ผ ํ•จ) ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ๋ณด๋‚ด์ฃผ์„ธ์š”!

HTML ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๋Š” ๊ฒƒ์ด ์–ด๋ ค์› ์Šต๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ํ•ดํ‚น์ด ์ €์—๊ฒŒ ๋„์›€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

PD: "\n"์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ค„ ๋ฐ”๊ฟˆ์ด ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ž๋™์œผ๋กœ ์ƒํ™ฉ์ด ์ข‹์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์˜ต์…˜์ด ๋” ๋‚˜์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์˜ˆ

  • ๋‚ด์šฉ: ํ˜„์žฌ ๊ฐœ์ฒด
  • ํ…์ŠคํŠธ: ์ผ๋ฐ˜ ํ…์ŠคํŠธ(์—ฌ๊ธฐ์— ์ค„ ๋ฐ”๊ฟˆ ๊ตฌ๋ฌธ ๋ถ„์„์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ)
  • html: html ๋ฌธ์ž์—ด ์ˆ˜์‹ 

html์„ ์‚ฌ์šฉํ•˜์—ฌ "
"
์Šค์™ˆ({
์ œ๋ชฉ: '์˜ค๋ฅ˜',
html: '์˜๋„ ํ™•์ธ
asdasdasas' ,
showConfirmButton: ์ฐธ,
showCloseButton: ์ฐธ,
})
์•ˆ๋…•ํžˆ ๊ณ„์„ธ์š”

const lines = ['๋‹น์‹ ์€ ์šฐ๋ฆฌ์—๊ฒŒ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ›์€ ๋ชจ๋“  ์ •๋ณด๋Š” ํ•ญ์ƒ ๊ธฐ๋ฐ€๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.', '๋‹น์‹ ์˜ ๋ฉ”์‹œ์ง€๋ฅผ ๊ฒ€ํ† ํ•˜๋Š” ๋Œ€๋กœ ์—ฐ๋ฝ์„ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.', ''+contact_email+'๋กœ ์ด๋ฉ”์ผ์„ ๋ณด๋ƒˆ์Šต๋‹ˆ๋‹ค. , ๋น ๋ฅธ ๋‹ต๋ณ€์„ ์œ„ํ•ด ํ™•์ธํ•ด์ฃผ์„ธ์š”.'];

swal('๋ฌธ์˜ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!',lines.join('\n\n'),'success');

// ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ๋‹ค!

const lines = ['You are very important to us, all information received will always remain confidential.', 'We will contact you as soon as we review your message.', 'We have sent an email to you at '+contact_email+' , Please check it for quick response.']; swal('Thank you for contacting us!',lines.join('\n\n'),'success');

๋‚ด ๊ฒฝ์šฐ์—๋Š” ํ…์ŠคํŠธ๋ฅผ ๋ฎ๊ธฐ ์œ„ํ•ด ์ถ”๊ฐ€๋œ div ํƒœ๊ทธ๊ฐ€ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

origina: Line0<br />Line1<br /> [not working]
after: <div>Line0<br />Line1<br /></div> [working fine]
swal({
    title: 'Mt Title',
    html: '<div>Line0<br />Line1<br /></div>',
 });

swal({ buttons: ["Wait ", "Add Details"], html: true, text: "Text one .\n Text 2.\n Text 3." })
์—ฌ๊ธฐ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜์‘์—์„œ ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ฆ๊ธฐ๋‹ค

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

xgqfrms-GitHub picture xgqfrms-GitHub  ยท  4์ฝ”๋ฉ˜ํŠธ

rafatux picture rafatux  ยท  5์ฝ”๋ฉ˜ํŠธ

vmitchell85 picture vmitchell85  ยท  6์ฝ”๋ฉ˜ํŠธ

jamieson99 picture jamieson99  ยท  3์ฝ”๋ฉ˜ํŠธ

blackrosezy picture blackrosezy  ยท  6์ฝ”๋ฉ˜ํŠธ