Lock: Display Modes

This document covers an outdated version of Lock - version 9. We recommend using the latest version of the library. To do so select v10 at the dropdown. If you are already using v9 but interested in upgrading, take a look at the Lock 9 to Lock 10 migration guide.

You can display Lock embedded or as a modal dialog with an overlay

Overlay Mode

Shows the widget on top of your web page. This is the default mode.

Here is the code you would add to your web application.

<script>
  var lock = new Lock('xxxxx', '<account>.auth0.com');

  lock.show();
</script>

Embedded Mode

The embedded mode will render the widget inside a <div> that you specify.

<div id="hiw-login-container"></div>

Here is the code you would add to your web application.

<script>
  var lock = new Lock('xxxxx', '<account>.auth0.com');

  // render in `#hiw-login-container` element
  lock.show({
    container: 'hiw-login-container'
  });
</script>

Notice that when you use the embedded mode the widget can't be "closed" unless you change the closable property.