How to Create Modals using Bootstrap? - In Technology World

Hot

Post Top Ad

19 Nov 2016

How to Create Modals using Bootstrap?

In Bootstrap, Modals are used to provide significant information that makes it necessary for the user to take an action that is necessary to be taken before moving on further in the webpage. The use of modals promotes a very efficient way to generate messages or prompt indications when needed. A number of dialog boxes can be created easily with the help of Bootstrap which performs the role of Modals with the help of Bootstrap modal plugins. The modals can be represented according to the coder’s wish. Usually, they could be windows with a header, message body and the footer containing action buttons for the user.
Activate Modals via Data Attributes
Activating a Bootstrap modal is done by simply clicking on the button or the link provided without writing JavaScript codes.
Activate Modals via JavaScript
Activating a Bootstrap Modal Window with the help of JavaScript is also easy. We just need to call the method modal() with the ‘id’ or the ‘class’.
Changing the Sizes of Modals
In Bootstrap we can increase or decrease the size of the modals by simply adding an extra class .modal-lg or .modal-sm on .modal-dialog.
Changing Modal Content Based on Trigger Button
We can use the feature of ‘modal events’ to create modal windows that are slightly different from one another and are based on the same modal HTML.
OPTIONS
A number of Options can be passed into the modal() method in Bootstrap to customize the functionality of the Modal window. These are namely backdrop, keyboard, show and remote options. These options can also be set by using data attributes on the modal box.
METHODS
There are methods which are standard Bootstrap Modal methods
They are:
  • .modal(options) –This function activates the content as a modal.
  • .modal('toggle') –This function allows us to toggle a modal window manually.
  • .modal('show')- This function opens a modal window manually.
  • .modal('hide')- This function hides a modal window manually.
  • .modal('handleUpdate')- This function readjusts the modal’s position in case if the modal height changes such that it becomes higher than the viewport height.
EVENTS
Bootstrap allows the usage of events for hooking into the modal functionality. They are namely show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal and loaded.bs.modal.
How to create tabs and switch between content using ‘Bootstrap tabs plugin’?
Bootstrap is a java frame work that helps you execute/ or create tabs. If you have a huge amount of data and you want to view all of it at once, creating tabs is an ideal way to manage space.  Creating tabs panes the data and each pane is viewable one at a time.
For example, let’s take example of a Facebook page:
You can see, Home page, notifications, settings, update photo, events, edit all in one page. You do not have to scroll down. The content is so well managed and viewable in a systematic manner. Thus, creating of tabs allows the user to switch between panes without leaving the page.
Dynamic tabs can be created in two ways:
  • Writing Java Script: In this, each tab is activated using JavaScript.
  • Data attributes: In this way, you need to activate a tab component.
A standard boot strapping method uses the following commands:
$(). Tab
The usage of this function activates the elements in the tab and also activates the related content container. The tab should also provide the data reference for targeting a node on the domain. Tab functionality can be also enhanced by the usage of certain commands and these commands allow you to choose which tab to show. If the current tab has to be hidden then a fresh tab has to be shown.
Thus, Bootstrap tabs plugins ease the usage and viewing of content, as it allows the user to view data in a much simpler and user-friendly way. It makes an alteration in data easy as a small change in URL can alter the active page and the secondary page.


No comments:

Post a Comment

Please type your exact name when you comment and please don't spam.

Post Top Ad