<commit_before>---
layout: docs
title: Access - Within IP
description: Encourage users to create a personal account or log in, with Registration &amp; Log in Form in Modal
group: best practice ui
---

Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.

## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}

## Access Prototypes

### Modal with Registration Form

Toggle a working Registration modal demo by clicking the button below. It will slide down and fade in from the top of the page.

<div id="exampleModalRegister" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalRegisterLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalRegisterLabel">Create your FREE personal account in just one step</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!--- / modal-header -->
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <form id="regformModal" action="#" novalidate="novalidate">
              <div class="form-group floating-label">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword2">Repeat password</label>
                <input type="password" class="form-control" id="<PASSWORD>2" name="<PASSWORD>" placeholder="Password">
              </div>
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Tick to receive information and special offfers about BMJ's products and services.</span>
              </label>
              <p style="padding-left: 2.2rem; font-size: .875rem">By registering with BMJ Best Practice you are agreeing to BMJ's <a href="#">terms and conditions</a> and it's <a href="#">privacy policy</a>.</p>
              <div class="form-group">
                <button type="submit" class="btn btn-primary" style="float: right;">Create account</button>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <div class="modalMessages">
              <h4>With a Best Practice personal account, you can:</h4>
                <p><i class="material-icons">&#xE0D4;</i> Use the highly rated Best Practice app, even offline</p>
                <p><i class="material-icons">&#xE8AE;</i> Get CPD certificates for time spent on Best Practice</p>
                <p><i class="material-icons">&#xE0C8;</i> Access Best Practice anywhere</p>
                <h5 class="text-center mt-5 font-weight-bold">Already have a personal account? <a href="#exampleModalLogIn" data-toggle="modal" data-dismiss="modal">Log in</a>.</h5>
            </div>
          </div>
        </div>
      </div><!--- / modal-body -->
      <div class="modal-footer">
        <div class="col-md-10">
          <label for="stop_show" class="custom-control custom-checkbox">
              <input type="checkbox" name="stop_show" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Don't ask me this again<br />(you can always create an account via the home page)</span>
            </label>
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <button type="button" class="btn btn-secondary float-right" data-dismiss="modal" aria-label="Close">Close</button>
          </div>
        </div>
    </div><!--- / modal-footer -->
    </div><!--- / modal-content -->
  </div><!--- / modal-dialog -->
</div><!--- / exampleModalRegister -->

<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalRegister">
    Launch Modal with Registration Form
  </button>
</div>

{% highlight html %}
<!-- Register Form in Modal -->
<div id="exampleModalRegister" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalRegisterLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalRegisterLabel">Create your FREE personal account in just one step</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!--- / modal-header -->
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <form id="regformModal" action="#" novalidate="novalidate">
              <div class="form-group floating-label">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group floating-label">
                <label for="<PASSWORD>Password2">Repeat password</label>
                <input type="password" class="form-control" id="<PASSWORD>2" name="<PASSWORD>2" placeholder="Password">
              </div>
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Tick to receive information and special offfers about BMJ's products and services.</span>
              </label>
              <p style="padding-left: 2.2rem; font-size: .875rem">By registering with BMJ Best Practice you are agreeing to BMJ's <a href="#">terms and conditions</a> and it's <a href="#">privacy policy</a>.</p>
              <div class="form-group">
                <button type="submit" class="btn btn-primary">Create account</button>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <div class="modalMessages">
              <h4>With a Best Practice personal account, you can:</h4>
                <p><i class="material-icons">&#xE0D4;</i> Use the highly rated Best Practice app, even offline</p>
                <p><i class="material-icons">&#xE8AE;</i> Get CPD certificates for time spent on Best Practice</p>
                <p><i class="material-icons">&#xE0C8;</i> Access Best Practice anywhere</p>
            </div>
            <p>Already have a personal account? <a href="#exampleModalLogIn" data-toggle="modal" data-dismiss="modal">Log in</a>.</p>
          </div>
        </div>
      </div><!--- / modal-body -->
      <div class="modal-footer">
        <div class="col-md-9">
          <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Don't ask me this again<br />(you can always create an account via the home page</span>
            </label>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <button type="button" class="btn btn-default btn-block float-right" data-dismiss="modal" aria-label="Close">Close</button>
          </div>
        </div>
    </div><!--- / modal-footer -->
    </div><!--- / modal-content -->
  </div><!--- / modal-dialog --><commit_msg>update to reg form<commit_after>---
layout: docs
title: Access - Within IP
description: Encourage users to create a personal account or log in, with Registration &amp; Log in Form in Modal
group: best practice ui
---

Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.

## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}

## Access Prototypes

### Modal with Registration Form

Toggle a working Registration modal demo by clicking the button below. It will slide down and fade in from the top of the page.

<div id="exampleModalRegister" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalRegisterLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalRegisterLabel">Create your FREE personal account in just one step</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!--- / modal-header -->
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <form id="regformModal" action="#" novalidate="novalidate">
              <div class="form-group floating-label">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword2">Repeat password</label>
                <input type="password" class="form-control" id="exampleInputPassword2" name="exampleInputPassword2" placeholder="Password">
              </div>
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Tick to receive information and special offfers about BMJ's products and services.</span>
              </label>
              <p style="padding-left: 2.2rem; font-size: .875rem">By registering with BMJ Best Practice you are agreeing to BMJ's <a href="#">terms and conditions</a> and it's <a href="#">privacy policy</a>.</p>
              <div class="form-group">
                <button type="submit" class="btn btn-primary">Create account</button>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <div class="modalMessages">
              <h4>With a Best Practice personal account, you can:</h4>
                <p><i class="material-icons">&#xE0D4;</i> Use the highly rated Best Practice app, even offline</p>
                <p><i class="material-icons">&#xE8AE;</i> Get CPD certificates for time spent on Best Practice</p>
                <p><i class="material-icons">&#xE0C8;</i> Access Best Practice anywhere</p>
                <h5 class="text-center mt-5 font-weight-bold">Already have a personal account? <a href="#exampleModalLogIn" data-toggle="modal" data-dismiss="modal">Log in</a>.</h5>
            </div>
          </div>
        </div>
      </div><!--- / modal-body -->
      <div class="modal-footer">
        <div class="col-md-9">
          <label class="custom-control custom-checkbox" style="display: none;">
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Don't ask me this again<br />(you can always create an account via the home page</span>
            </label>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <button type="button" class="btn btn-secondary float-right" data-dismiss="modal" aria-label="Close">Close</button>
          </div>
        </div>
    </div><!--- / modal-footer -->
    </div><!--- / modal-content -->
  </div><!--- / modal-dialog -->
</div><!--- / exampleModalRegister -->

<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalRegister">
    Launch Modal with Registration Form
  </button>
</div>

{% highlight html %}
<!-- Register Form in Modal -->
<div id="exampleModalRegister" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalRegisterLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalRegisterLabel">Create your FREE personal account in just one step</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!--- / modal-header -->
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <form id="regformModal" action="#" novalidate="novalidate">
              <div class="form-group floating-label">
                <label for="exampleInputEmail1">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group floating-label">
                <label for="exampleInputPassword2">Repeat password</label>
                <input type="password" class="form-control" id="exampleInputPassword2" name="exampleInputPassword2" placeholder="Password">
              </div>
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Tick to receive information and special offfers about BMJ's products and services.</span>
              </label>
              <p style="padding-left: 2.2rem; font-size: .875rem">By registering with BMJ Best Practice you are agreeing to BMJ's <a href="#">terms and conditions</a> and it's <a href="#">privacy policy</a>.</p>
              <div class="form-group">
                <button type="submit" class="btn btn-primary">Create account</button>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <div class="modalMessages">
              <h4>With a Best Practice personal account, you can:</h4>
                <p><i class="material-icons">&#xE0D4;</i> Use the highly rated Best Practice app, even offline</p>
                <p><i class="material-icons">&#xE8AE;</i> Get CPD certificates for time spent on Best Practice</p>
                <p><i class="material-icons">&#xE0C8;</i> Access Best Practice anywhere</p>
                <h5 class="text-center mt-5 font-weight-bold">Already have a personal account? <a href="#exampleModalLogIn" data-toggle="modal" data-dismiss="modal">Log in</a>.</h5>
            </div>
          </div>
        </div>
      </div><!--- / modal-body -->
      <div class="modal-footer">
        <div class="col-md-9">
          <label class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">Don't ask me this again<br />(you can always create an account via the home page</span>
            </label>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <button type="button" class="btn btn-secondary float-right" data-dismiss="modal" aria-label="Close">Close</button>
          </div>
        </div>
    </div><!--- / modal-footer -->
    </div><!--- / modal-content -->
  </div><!--- / modal-dialog -->
{'fraction_non_alphanumeric': 0.15207399747213604, 'fraction_numerical': 0.006951625876134666, 'mean_word_length': 2.6121601992114547, 'pattern_counts': {'":': 0, '<': 414, '<?xml version=': 0, '>': 414, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4598109', 'n_tokens_mistral': 4826, 'n_tokens_neox': 4651, 'n_words': 1261}