Show Options

Modal:

This section is used to display a button which on click shows a modal consist of title, content and image.


Available Options:

  • Modal with title and content.

Output:

Code:


<div class="darkout-section">
{% include do-modal.html tag="modules" id="one" %}
</div>


How to add content

  • Step1: Navigate to the data file for modal in _data > do-modal.yml
  • Step2: Add content to the data file as shown in the below example.
- modal-button-title: click to open popup modal  # Use Modal button title here
  modal-title: Modal title 1  # Use Modal title here
  modal-content: <img class="img-fluid" src="/assets/images/sample.jpg" alt=""><br>This is modal content for this modal1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use Modal content here
  tags: modules  # Use modal tag here
  • Step3: In the data file tags is a mandatory value. Without using tags modal will not be displayed.

How to add in page

  • Step1: Add modal to the page using the include statement.
  • Step2: On the page use

<div class="darkout-section">{% include do-modal.html tag="modules" id="one" %}</div>

  • Attributes:

    • Id: Use modal Id here. Id is used for adding multiple modal on same page. without using id modal will not work. (Mandatory)

    • Tag: Use tag for the modules. Without using tag modal will not be included. (Mandatory)

    • Class: Use additional class here as include variable.