modal popup flow

bootstrap modal popup example on load.

by willtx

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal 
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
-->

<input value="Integration Icon" type="button" id="integrationIcon" class="btn btn-primary btn-lg" data-flag="" />

<input type="button" id="integrationIconTrue" value="Integration Icon (popup alert)" class="btn btn-primary btn-lg" data-flag="true" />

<div class="modal fade" id="divStaffIntegration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       <h2>
         Staff Integration Popup
       </h2>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="divReportDashboard" tabindex="-1" role="dialog" aria-labelledby="modal2">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       <h2>
         Report Dashboard Popup
       </h2>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn...

JavaScript

jQuery(document).ready(function(e) {
		console.log('...document loaded');
    
    jQuery('#mymodal').trigger('click');
    
    jQuery('#integrationIcon').on('click', (function(){
    	const flag = $(this).data('flag');
      console.log('integrationIcon flag: ' + flag);
      openIntegrationPopup(flag);
    }));
    
     jQuery('#integrationIconTrue').click(function(){
    	const flag = $(this).data('flag');
      console.log('integrationIconTrue flag: ' + flag);
      openIntegrationPopup();
    });
    
    // jQuery('#divStaffIntegrationPhase2').trigger('click');
     //jQuery('#divReportDashboard').trigger('click');
     //jQuery('#divStaffIntegration').trigger('click');
});

  function popupOpenStaffIntegration() {
  	console.log("in popupOpenStaffIntegration");
    
    $("#divStaffIntegration").modal({
      closable: false,
      autofocus: false,
      dimmerSettings: {
        opacity: 0.5
      }
    }).modal('show');
  }
  
function popupOpenReportDashboard() {
	console.log("in popupOpenReportDashboard ");
  
  $("#divReportDashboard").modal({
    closable: false,
    autofocus: false,
    dimmerSettings: {
      opacity: 0.5
    }
  }).modal('show');
}

function openPhaseTwoIntegrationConfirm() {
	console.log("in openPhaseTwoIntegrationConfirm");
  
  $("#divStaffIntegrationPhase2").modal({
    closable: false,
    autofocus: false,
    dimmerSettings: {
      opacity: 0.5
    }
  }).modal('show');
}

function openIntegrationDashboard() {
	console.log("in openIntegrationDashboard");
  
  var dashboardURL = window.routemap + "WorkflowIntegration/IntegrationDashboard"
  //window.open(dashboardURL,"_self");
  alert("navidate to " + dashboardURL);
}

function checkIdaasTokenStatus() {
	console.log("in checkIdaasTokenStatus");
}

function openIntegrationPopup(flag) {

		console.log("in openIntegrationPopup with flage: " + flag);
    
  var statusPopup;
  if (localStorage.getItem("IntegrationPopupOpened") === null) {
   ...