A true alternative solution to the modal is the sub-view. Through the sub-view you can easily and quickly display any content, thus considerably improving the user’s experience.
You can choose to show the sub-view either in the right or in the top corner of your screen.

If you decide to show it in the right corner, remember to insert the class show-sv and the attribute data-startFrom="right" on the button.

<a class="btn btn-green show-sv" href="#example-subview-1" data-startFrom="right">Show Right Subview <i class="fa fa-chevron-right"></i></a>

Otherwise, if you do not insert any attribute data, the sub-view will automatically appear in the top corner of the screen.

<a class="btn btn-green show-sv" href="#example-subview-1">Show Top Subview <i class="fa fa-chevron-up"></i></a>
The sub-view will automatically display the close button in the top right end corner of the screen. You can also create your customized close buttons with the class hide-sv

If you recall a sub-view link in an already open sub-view, the content will be shown with a fade-out effect. Then, a back button will appear, allowing you to scroll back the contents.

You can also create your customized back buttons with the class back-sv

You can use the call-back functions when the sub-view is shown, when you click the close button or when you hide the sub-view content.

$(".sv-callback1").on("click", function() {
	$.subview({
		content: "#example-subview-1",
		onShow: function() {
			bootbox.alert("Do something when the subview is shown!");
		}
	});
})
when the sbview appear, an alert displays the message "Do something when the subview is shown!"

If you choose to associate a function to the close button, you can also program the automatic dismissal of the sub-view, by inserting the hidesubview function $.hideSubview(); in the desired point.

$(".sv-callback2").on("click", function() {					
	$.subview({
		content: "#example-subview-1",
		startFrom: "right",
		onClose: function() {
			bootbox.confirm("Are you sure you want to close subview?", function(result) {
				if(result) {
					$.hideSubview();
				};
			});						
		}
	});
});
before closing an alert message will ask for confirmation
$(".sv-callback3").on("click", function() {
	$.subview({
		content: "#example-subview-1",
		startFrom: "right",
		onHide: function() {
			bootbox.alert("Do something when the subview is hidden!");
		}
	});
});
when the sbview disappear, an alert displays the message "Do something when the subview is hidden!"