How do I show a div in my sweetalert2 dialog?-CodePudding

I have a div:

#box{
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    position: relative;
    height:auto;
    width:40em;
    border-radius: 8px;
    padding: 20px;
    background-color: #f7e0a2e8;
}

<div id="box">
    <p><b>Steps:</b></p>
    <ul>
        <li>Select the table where you want to insert data</li><br>
        <li>For the input file, the column order should be as shown below:</li><br>
        <div style="border: 1px solid black; padding: 10px;">
            For <b>quarter master</b>:<br><br>
              <table border="1">
                  <tr>
                     <td>Qtr_No</td>
                     <td>Qtr_type</td>
                     <td>Book_no</td>
                     <td>Page_no</td>
                 </tr>       
              </table>
        </div>
        <div style="border: 1px solid black; padding: 10px;">
            For <b>quarter occupancy</b>:<br><br>
              <table border="1">
                  <tr>
                     <td>EmpNo</td>
                     <td>QtrNo</td>
                     <td>Qtrtype</td>
                     <td>Book_no</td>
                     <td>Page_no</td>
                     <td>Occupation date</td>
                  </tr>       
             </table>
        </div>
        <div style="border: 1px solid black; padding: 10px;">
            For <b>employee master</b>:<br><br>
              <table border="1">
                  <tr>
                     <td>EmpNo</td>
                     <td>Name</td>
                     <td>Designation</td>
                     <td>Department</td>
                     <td>Billunit</td>
                     <td>Station</td>
                     <td>Retirement date</td>
                  </tr>       
             </table>
        </div><br>
        <li><b>It is advisable to backup the database, before uploading data</b></li>
    </ul>
</div>

I want to show this div inside my SweetAlert2 dialog when the page loads up. Infact, the div should only be visible in the dialog, not in the page. How do I proceed?

CodePudding user response：

Try putting your div inside the html attribute of Swal.fire

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html:
    html:
    `<div id="box">
    <p><b>Steps:</b></p>
    <ul>
        <li>Select the table where you want to insert data</li><br>
        <li>For the input file, the column order should be as shown below:</li><br>
        <div style="border: 1px solid black; padding: 10px;">
            For <b>quarter master</b>:<br><br>
              <table border="1">
                  <tr>
                     <td>Qtr_No</td>
                     <td>Qtr_type</td>
                     <td>Book_no</td>
                     <td>Page_no</td>
                 </tr>       
              </table>
        </div>
        <div style="border: 1px solid black; padding: 10px;">
            For <b>quarter occupancy</b>:<br><br>
              <table border="1">
                  <tr>
                     <td>EmpNo</td>
                     <td>QtrNo</td>
                     <td>Qtrtype</td>
                     <td>Book_no</td>
                     <td>Page_no</td>
                     <td>Occupation date</td>
                  </tr>       
             </table>
        </div>
        <div style="border: 1px solid black; padding: 10px;">
            For <b>employee master</b>:<br><br>
              <table border="1">
                  <tr>
                     <td>EmpNo</td>
                     <td>Name</td>
                     <td>Designation</td>
                     <td>Department</td>
                     <td>Billunit</td>
                     <td>Station</td>
                     <td>Retirement date</td>
                  </tr>       
             </table>
        </div><br>
        <li><b>It is advisable to backup the database, before uploading data</b></li>
    </ul>
</div>`,
  [..]
})

Watch out for the single quotes and double qoutes in your html. I have used backticks/backquotes in the html attribute to get around this.

You can see the result in this pen: https://codepen.io/julesdeckers/pen/vYdOKGZ