modal REGIONS bootstrap test (responsive)

In this example below you will see how to do a modal REGIONS bootstrap test (responsive) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by umsteadSSB, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright umsteadSSB ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>modal REGIONS bootstrap test (responsive)</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container">
  <a href="#">Placeholder 1</a>
  <label for="first">first</label>
  <select id="first">
    <option>asdf</option>
    <option>asdffff</option>
  </select>
  
  <a>No href</a>
  <a tabindex="0">Tabindex but no href</a>
  <a href="#" tabindex="-1">Href and negative tabindex</a>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="myBtn">Launch dialog</button>
  <a href="#">Placeholder 2</a>
  <a href="#">Placeholder 3</a>


  <div class="modal fade" id="myModal" role="region" aria-labelledby="exampleModalLabel" aria-describedby="exampleModalContent">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel" tabindex="-1">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="btnclose">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <p id="exampleModalContent">Example dialog content</p>
          <div id="srvErr" tabindex="-1" aria-label="Error: Server broken!">Error! Server Broken!</div>
<!--           <div class="form-group"> -->
            <label for="usr">Name:</label>
            <input type="text" class="formThing form-control" id="usr" aria-describedby="usrAlert" data-msg="Error 1: Place message here...">
            <div id="usrAlert" class="errMsg">
              <div aria-live="assertive" class="onBlurMsg"></div>
              <div class="onSubmitMsg"></div>
            </div> <!--end of msg 1-->
<!--           </div> -->
<!--           <div class="form-group"> -->
            <label for="pwd">Password:</label>
            <input type="text" class="formThing form-control" id="pwd" aria-describedby="pwdAlert" data-msg="Error 2: message goes here...">
            <div id="pwdAlert" class="errMsg">
              <div aria-live="assertive" class="onBlurMsg"></div>
              <div class="onSubmitMsg"></div>
            </div><!--end of msg 2-->

            <label for="pwd2">Password2 (control field):</label>
            <input type="text" class="form-control" id="pwd2" aria-describedby="pwdAlert2" placeholder="no error handling here; ignore">
          <a href="#">placeholder link inside of modal</a>
<!--             <div id="pwdAlert2" class="errMsg" role="alert">This is an alert error (no scripting set up)</div> -->
<!--           </div> -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="btnsave">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <a href="#">Placeholder 4, after dialog</a>
  <div class="tipcontainer">
    <button class="btn btn-danger" id="opentip" aria-describedby="tooltip1">Help</button>
    <div id="tooltip1" class="tooltipThing" role="tooltip">This causes something to happen</div>
  </div>
  <a href="#">Placeholder 5</a>
  <div role="button" tabindex="1246">clickable div button,   big positive tabindex</div>
</div>
<!-- end of container -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/umsteadSSB/modal-regions-bootstrap-test-responsive-gREvbL */
a[href="#"] {
  display: block;
  padding: 1em;
}

.errMsg {
  color: #D00;
}

a:focus, button:focus, h5:focus {
  outline: 2px solid #000 !important;
}

#srvErr {
  color: #D00;
  background-color: #FEE;
padding: .5em;
  border: 1px solid #000;
  border-radius: 5px;
  display: none;
  
}

.tipcontainer {
  position: relative;
}

.tooltipThing {
  border: 1px solid #000;
  padding: 1em;
  border-radius: 5px;
  max-width: 30%;
  background-color: #fff;
  color: #000;
  display: none;
 }

/*Downloaded from https://www.codeseek.co/umsteadSSB/modal-regions-bootstrap-test-responsive-gREvbL */
$("#myModal").on("shown.bs.modal", function() {
  $("#exampleModalLabel").focus();
  $("#myModal").siblings().attr("aria-hidden", "true");
  $("[tabindex]")
    .not("a[href]")
    .not("button")
    .not("input")
  .not("[tabindex='-1']")
    .not("#myModal")
    .not("#myModal *")
    .each(function() {
      $(this).attr("data-tabindexified", $(this).attr("tabindex"));
      $(this).attr("tabindex", "-1");
    });
  $("a[href], button, input, select")
    .not("#myModal")
    .not("#myModal *")
  .not("[tabindex='-1']")
    .attr("tabindex", "-1")
    .attr("data-tabindexified", "null");
});

$("#myModal").on("hide.bs.modal", function(e) {
  $("#myModal").siblings().removeAttr("aria-hidden");
  $("[data-tabindexified='null']").each(function() {
    //set tabindex back
    $(this).removeAttr("tabindex").removeAttr("data-tabindexified"); //set non-positive tabindex back
  });
  $("[data-tabindexified]").not("[data-tabindexified='null']").each(function() {
    //set tabindex back
    $(this).attr("tabindex", $(this).attr("data-tabindexified"));
    $(this).removeAttr("data-tabindexified");
  }); //set positive tabindex back
}); //end of modal hide

$("#btnsave").on("keydown", function(e) {
  if ((e.which == 9 || e.keyCode == 9) && !e.shiftKey) {
    e.preventDefault();
    $("#btnclose").focus();
  }
});

$("#btnclose").on("keydown", function(e) {
  if ((e.which == 9 && e.shiftKey) || (e.keyCode == 9 && e.shiftKey)) {
    e.preventDefault();
    $("#btnsave").focus();
  }
}); //end of tab/shift tab handling

// start on submit handling here
$("#btnsave").on("click", function() {
  if (!$("#srvErr").is("visible")) {
    $("#srvErr").show();
    $("#srvErr").focus();
    $(".formThing").each(function() {
      $(this).next().children().empty();
      $(this)
        .next()
        .children(".onSubmitMsg")
        .append("<span>" + $(this).attr("data-msg") + "</span>");
    });
  }
}); //end of btnsave click

// start tab err handling here
$(".formThing").on("blur", function() {
  if (
    $(this).val() === "" &&
    $(this).next().children(".onBlurMsg").children().length == 0
  ) {
    $(this).next().children().empty(); // empty the errors for this field
    $(this)
      .next()
      .children(".onBlurMsg")
      .append("<span>" + $(this).attr("data-msg") + "</span>");
  } else {
    // $(this).next(".errMsg").children().empty();
  }
});

//tooltip start
$("#opentip").on("focus", function() {
  $("#tooltip1").css("display", "block");
});
$("#opentip").on("blur", function() {
  $("#tooltip1").css("display", "none");
});

$("#opentip").hover(
  function() {
    $("#tooltip1").css("display", "block");
  },
  function() {
    $("#tooltip1").css("display", "none");
  }
);

Comments