BACK CLOSE
  1. Dashboard
  2. Subview
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.

Basic Subview

Show Right Subview

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>
Show Top Subview

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

Infinite Subview

Show Infinite Subview

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

Callbacks

On Show

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!"
On Close

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
On Hide 
$(".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!"