Sweetalert: λ¬Έμ„œμ—μ„œ λˆ„λ½λœ κΈ°λ³Έ HTML 예제

에 λ§Œλ“  2018λ…„ 02μ›” 13일  Β·  6μ½”λ©˜νŠΈ  Β·  좜처: t4t5/sweetalert

경고에 HTML을 μ‰½κ²Œ μ‚½μž…ν•  수 μžˆλ„λ‘ λ³€κ²½λ˜μ—ˆμœΌλ―€λ‘œ λ¬Έμ„œλŠ” μ‚¬λžŒλ“€μ΄ μ½˜ν…μΈ  ν˜•μ‹μ„ μ§€μ •ν•˜λŠ” 방법에 λŒ€ν•œ κ°„λ‹¨ν•œ 예λ₯Ό μ œκ³΅ν•΄μ•Ό ν•©λ‹ˆλ‹€. λ‚˜λŠ” μ•„λž˜μ™€ 같은 것을 μ œμ•ˆν•œλ‹€

```
var λ‚΄μš© = document.createElement('div');
content.innerHTML = '일뢀 ν•„λ“œμ— 였λ₯˜κ°€ μžˆμŠ΅λ‹ˆλ‹€.
ν™•μΈν•˜κ³  λ‹€μ‹œ μ‹œλ„ν•˜μ‹­μ‹œμ˜€.';

swal({
    title: 'Error',
    content: content,
    icon: "error",
})

````

μ•„λž˜μ— @carloscfcortez 의 예λ₯Ό μ œμ•ˆν•©λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이것이 swal μžμ²΄μ— 톡합 될 수 μžˆλ‹€λ©΄ 쒋을 κ²ƒμž…λ‹ˆλ‹€.

    swal({
        title: 'Error',
        content: {
                element: 'div',
                innerHTML: 'Some fields have errors.<br/>Please check and try again.'
        }
        icon: "error",
    })

λͺ¨λ“  6 λŒ“κΈ€

이것이 swal μžμ²΄μ— 톡합 될 수 μžˆλ‹€λ©΄ 쒋을 κ²ƒμž…λ‹ˆλ‹€.

    swal({
        title: 'Error',
        content: {
                element: 'div',
                innerHTML: 'Some fields have errors.<br/>Please check and try again.'
        }
        icon: "error",
    })

λ™μ˜ ! λ˜λŠ” μ—¬λŸ¬ μš”μ†Œκ°€ μ‹€μ œλ‘œ μ§€μ›λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

λ™μ˜ν•œλ‹€. 이 λ¬Έμ œμ—μ„œ swalμ—μ„œ HTML을 μ‚¬μš©ν•˜λŠ” 방법을 μ°Ύμ•„μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€...

        swal({
            title: 'Error',
            content: {
                element: "div",
                attributes: {
                    innerHTML: "Some fields have <strong>errors.</strong><br/>Please check and try again."
                },
            },
            icon: "error",
        })

κ°€κΉŒμ› μ–΄μš” 😝

λ˜ν•œ λ¬Έμ„œμ—μ„œ μ½˜ν…μΈ μ™€ ν…μŠ€νŠΈλŠ” λ™μΌν•˜μ§€ μ•ŠμœΌλ©° 기본적으둜 CSS ν΄λž˜μŠ€κ°€ λ‹€λ₯΄λ―€λ‘œ(swal-text λŒ€ swal-content) μ½˜ν…μΈ μ™€ ν…μŠ€νŠΈκ°€ μ‹œκ°μ μœΌλ‘œ λ‹€λ¦…λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰