By default, the widget will add itself to the document ‘body’. This is fine for most cases.

If the widget is going to be displayed while a modal dialog is displayed, the modal may prevent the widget from accepting focus on its inputs. This will break the search interface and, not inconsequentially, username and password fields on the import sources that require it.

A modal dialog will only permit focus on descendant elements so the solution is to attach the CloudSponge widget to a child of the modal. To facillitate this, we offer the rootNodeSelector option. Pass it a selector for the container node that should be used for the CloudSponge widget.

Take care in selecting the correct location for the CloudSponge widget in the DOM. Usually, it is best to attach the widget to the highest ancestor in the modal so that it accepts input but doesn’t inherit any size constraints from the modal. Note that in this example which uses Bootstrap, the rootNode is the first child of the modal div.

Launch widget inside a modal

Show Code

<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
<script>
cloudsponge.init({
  // by default, the widget adds itself to the document 'body'. Override that by pointing to the node we created
  //  for this purpose in the HTML below.
  rootNodeSelector: '#cloudsponge-widget-container'
})
</script>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <!--
      Put the CloudSponge Widget here where it is a child of the modal (so it can still accept focus on the inputs)
      and it's not constrained inside the UI of the dialog.
    -->
  <div id="cloudsponge-widget-container"></div>

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">CloudSponge Modal Example</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <!-- This textarea will be populated with the contacts returned by CloudSponge -->
            <label for="exampleInputEmails">Recipient email addresses</label>

            <!-- Any link with a class="cloudsponge-launch" will start the import process -->
            <a class="cloudsponge-launch" href="javascript:false">Add from Address Book</a>

            <textarea class="cloudsponge-contacts form-control" id="exampleInputEmails" placeholder="Type email addresses separated by commas or select them from your address book by clicking the link above."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->