How to Create an Onclick Sidebar Modal?

This Onclick Sidebar Modal is built with HTML, CSS, JavaScript. It can be used for any kind of website. Besides, you can customize it as you want to display the modal right or left of the website content page. It is responsive without the need for any extra coding. You can add as much content as you like. Its height will be taken automatically. This sidebar modal is responsive to all devices and supports all browsers.

Step 1: HTML Code

<button type="button" class="btn modal-btn" data-toggle="modal" data-target="#myModalRight">
<i class='bx bx-menu-alt-right'></i>
</button>

<div id="myModalRight" class="modal fade modal-right" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				Logo
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<h2>About Us</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
				<div class="image-area">
					<h2>Instagram</h2>
					<div class="row">
						<div class="col-lg-4">
							<a href="#">
								<img src="assets/img/home-one/1.png" alt="Instagram">
							</a>
						</div>
						<div class="col-lg-4">
							<a href="#">
								<img src="assets/img/home-one/2.png" alt="Instagram">
							</a>
						</div>
						<div class="col-lg-4">
							<a href="#">
								<img src="assets/img/home-one/3.png" alt="Instagram">
							</a>
						</div>
						<div class="col-lg-4">
							<a href="#">
								<img src="assets/img/home-one/4.png" alt="Instagram">
							</a>
						</div>
						<div class="col-lg-4">
							<a href="#">
								<img src="assets/img/home-one/5.png" alt="Instagram">
							</a>
						</div>
						<div class="col-lg-4">
							<a href="#">
								<img src="assets/img/home-one/6.png" alt="Instagram">
							</a>
						</div>
					</div>
				</div>
				<div class="social-area">
					<h3>Our Social Contact</h3>
					<ul>
						<li>
							<a href="https://www.facebook.com/" target="_blank">
								<i class='bx bxl-facebook' ></i>
							</a>
						</li>
						<li>
							<a href="https://www.twitter.com/" target="_blank">
								<i class='bx bxl-twitter' ></i>
							</a>
						</li>
						<li>
							<a href="https://www.linkedin.com/" target="_blank">
								<i class='bx bxl-linkedin' ></i>
							</a>
						</li>
						<li>
							<a href="https://www.instagram.com/" target="_blank">
								<i class='bx bxl-instagram' ></i>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

Step 2: CSS Code

.modal-btn {
padding: 0;
	color: #510eb7;
	font-size: 30px;
	position: relative;
	top: 1px;
	margin-left: 10px;
	background-color: #fff;
	width: 35px;
	height: 35px;
	line-height: 40px;
	font-size: 25px;
	border-radius: 0 0 0 10px;
	transition: .5s;

	&:hover {
		border-radius: 0;
	}
}

.modal-body {
padding: 40px 30px 50px;

h2 {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 12px;
		color: #000;
}
p {
      	color: #545555;
      	font-size: 14px;
      	margin-bottom: 20px;
}
.image-area {
 	margin-bottom: 10px;

        	.col-lg-4 {
       		padding-right: 5px;
            	margin-right: -5px;
}
     	a {
           		display: block;
            	margin-bottom: 15px;

            	img {
                		width: 100%;
           		}
   	}
    }
   .modal-item {
margin-bottom: 30px;
    }
    .social-area {
text-align: center;

h3 {
font-size: 20px;
            margin-bottom: 12px;
            font-weight: 600;
            color: #000;
 }
        	ul {
           		margin: 0;
            	padding: 0;

            	li {
                		list-style-type: none;
                		display: inline-block;

               		a {
                    			display: block;
                    			color: $gold-color;
                    			border: 1px solid #fcf189;
                    			width: 32px;
                    			height: 32px;
                   			line-height: 34px;
                    			border-radius: 50%;
                   			margin-right: 3px;
                    			margin-left: 3px;
                   			font-size: 16px;
                    			text-align: center;

                    			&:hover {
                        			color: #fff;
                        			background-color: #fcf189;
                    			}
                		}
            	}
      	}
 }
}
#myModalRight {
z-index: 99999;
}
.modal {
&.modal-right {
        .modal-dialog {
max-width: 380px;
        		min-height: 100vh;
        }
        		&.show .modal-dialog {
            		transform: translate(0, 0);
       		}
        		.modal-content {
            		height: 100vh;
            		overflow-y: auto;
            		border-radius: 0;
        		}
    	}
    	&.modal-left {
        		.modal-dialog {
        			transform: translate(-100%, 0);
        			margin: 0 auto 0 0;
        		}
    	}
    	&.modal-right {
        		.modal-dialog {
        			transform: translate(100%, 0);
        			margin: 0 0 0 auto;
        		}
    	}
}

Step 3:  JavaScript Code

$(document).ready (function () {
	$(".modal a").not (".dropdown-toggle").on ("click", function () {
		$(".modal").modal ("hide");
	});
});