carbon-components/html/modal/modal--input.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-wxd48qs1kv">Show
  modal</button>

<div data-modal id="modal-wxd48qs1kv" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-wxd48qs1kv-label" aria-describedby="modal-wxd48qs1kv-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-wxd48qs1kv-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-wxd48qs1kv-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
          <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
            <title>Close Modal</title>
            <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"
            />
          </svg>
      </button>
    </div>

    <div class="bx--modal-content">
      <div class="bx--form-item">
        <label for="text-input-wxd48qs1kv" class="bx--label">Text Input label</label>
        <input id="text-input-wxd48qs1kv" type="text" class="bx--text-input" placeholder="Optional placeholder text"
          data-modal-primary-focus>
      </div>
    </div>

    <div class="bx--modal-footer">
      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
      <button class="bx--btn bx--btn--primary" type="button"  >Primary button</button> </div>  </div>
        </div>