Geniux

Bootstrap Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Default

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Show Code

<!-- Button trigger modal -->
  <div class="bs-example">
    <button type="button" class="gnx-btn gnx-btn-default" data-toggle="modal" data-target="#myModal">Default modal</button>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title pull-left" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>...</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Large Modal

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

Show Code

<!-- Button trigger modal -->
<div class="modal-example">
  <!-- Large modal -->
  <button type="button" class="gnx-btn gnx-btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
</div>

<!-- Large Modal -->
<div class="modal fade bs-example-modal-lg" id="myLargeModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title pull-left" id="myLargeModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Small modal

Show Code

<!-- Button trigger modal -->
<div class="modal-example">
  <!-- Small modal -->
  <button type="button" class="gnx-btn gnx-btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
</div>
<!-- Small Modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModal">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title pull-left" id="mySmallModal">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Using The Grid System

To take advantage of the Bootstrap grid system within a modal, just nest .rows within the .modal-body and then use the normal grid system classes.

Show Code

<!-- Button trigger modal -->
<div class="bs-example">
  <button type="button" class="gnx-btn gnx-btn-default" data-toggle="modal" data-target="#gridSystemModalLabel">Modal whit grid</button>
</div>
<!-- Modal With Grid -->
<div class="modal fade" id="gridSystemModalLabel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title pull-left" id="gridModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4 m-b-30"><img src="assets/images/demo-img/gnx-550x550.jpg" class="img-responsive" alt="Image">
          </div>
          <div class="col-md-8">
            <p class="m-b-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat velit esse cillum dolore eu fugiat.</p>
          </div>
        </div><!-- /.row -->
        <div class="row">
          <div class="col-md-4 bg-gray with-border">.col-md-4</div>
          <div class="col-md-8 bg-gray with-border">.col-md-8</div>
        </div><!-- /.row -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Modal With Contact Form

Show Code

<section>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
          <!-- Button trigger modal -->
          <div class="bs-example">
            <button type="button" class="gnx-btn gnx-btn-default" data-toggle="modal" data-target="#exampleModal">Launch Form Modal</button>
          </div>

          <!-- Modal With Form-->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title pull-left" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                  <div class="modal-body">
                    <!-- Start Contact Form -->
                    <form id="contactForm" class="contact-form shake" data-toggle="validator">
                      <div class="form-group">
                        <div class="controls">
                          <input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="controls">
                          <input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="controls">
                          <input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="controls">
                          <textarea id="message" rows="7" placeholder="Message" class="form-control" required data-error="Write your message"></textarea>
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                      <button type="submit" id="submit" class="gnx-btn gnx-btn-default"><i class="ion-android-star"></i> Send Message <i class="ion-android-star"></i></button>
                      <div id="msgSubmit" class="h3 text-center hidden"></div>
                      <div class="clearfix"></div>
                    </form>
                    <!-- End Contact Form -->
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- /.row -->
    </div><!-- /.container -->
  </section>

# Shortcodes 1

# Shortcodes 2

# Shortcodes 3

# Shortcodes 4

Bootstrap Modals

Default

Large Modal

Small modal

Using The Grid System

Modal With Contact Form