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

Question

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?

Answer 1

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