<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<p>Click on the following "Open a modal" button will do the following:</p>
<ol>
  <li>
    Lazily load jQuery using import()
  </li>
  <li>
    Load Twitter Bootstrap JS
  </li>
  <li>
    Open the modal window using Bootstrap
  </li>
</ol>

<button class="btn btn-primary btn-lg open-dialog">
  Open a modal using dynamic import()
</button>

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="https://hospodarets.com/native-ecmascript-modules-dynamic-import">Native ECMAScript modules: dynamic import()</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<h3>Links</h3>
<ul>
  <li>
    <a href="https://hospodarets.com/native-ecmascript-modules-dynamic-import">Native ECMAScript modules: dynamic import()</a>
  </li>
</ul>
const openDialogBtn = document.querySelector(".open-dialog");
openDialogBtn.addEventListener("click", openDialog);

async function openDialog() {
  await import("https://code.jquery.com/jquery-3.2.1.slim.min.js");
  await import("//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js");
  $(".modal").modal();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.