MOVU Components

Modal Text Input 

<button class="button-primary button-default button-default-size" onclick="this.blur();" data-toggle="modal" data-target="#exampleModalCenter"> Click me</button>
<!-- Modal -->
<div class="modal-with-text-input movu-modal modal-dialog modal-dialog-centered modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <div class="around-close pull-right" class="close" data-dismiss="modal" aria-label="Close">
                <i class="material-icons pull-right">close</i>
            </div>
        </div>

        <div class="modal-with-text-input clearfix">
            <h2 class="modal-title">Save your progress</h2>
            <p>We'll need your email address to send you a continue link.</p>
            <div class="modal-with-text-input-content-bottom text-center clearfix">
                <div class="col-xs-12">
                    <div class="form-group">
                        <div class="movu-input-wrapper js-float-label-wrapper movu-input-float-label" tabindex="0">
                            <input id="inputId" type="text" class="default-input">
                            <label for="inputId">Input Label</label>
                        </div>
                        <div class="invalid-feedback">

                        </div>
                    </div>

                </div>
                <div class="col-xs-12">
                    <button class="button-primary button-default button-default-size" onclick="this.blur();"> Send</button>
                </div>
            </div>
        </div>

    </div>
</div>
 
<!-- Button trigger modal -->
{% extends "@modal-template" %}
{% block content %}
<div class="modal-with-text-input clearfix">
  <h2 class="modal-title">Save your progress</h2>
  <p>We'll need your email address to send you a continue link.</p>
  <div class="modal-with-text-input-content-bottom text-center clearfix">
    <div class="col-xs-12">
      {% render '@text-input-with-floatlabel' %}
    </div>
    <div class="col-xs-12">
      {% render "@button-primary", {buttonText: "Send"}, true %}
    </div>
  </div>
</div>
{% endblock %}
 
/* No context defined. */

No notes defined.