"Modal Traversal"
Bootstrap 3.3.0 Snippet by wullaj

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="modal" id="modalUserRoleAdministration" tabindex="-1" role="dialog" aria-labelledby="editUserRecord"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="editUserRecord">Edit Record</h4> </div> <div id="EditUserRoleRecordModalContents" class="modal-body"> <input class="fromDateTicks" data-val="true" data-val-number="The field Ticks must be a number." data-val-required="The Ticks field is required." id="FromDate_Ticks" name="FromDate.Ticks" type="hidden" value="636262073460930000"> <input class="JustificationOriginal" id="JustificationOriginal" name="JustificationOriginal" type="hidden" value="Another Tester 1"> <input class="RoleStatusOriginal" id="RoleStatusOriginal" name="RoleStatusOriginal" type="hidden" value="Requested"> <input data-val="true" data-val-required="The UserId field is required." id="UserId" name="UserId" type="hidden" value="ac0c35ba-0c11-493d-8387-679b3b1e0669"> <div class="form-group"> <label for="FirstName">FirstName</label> <input class="form-control firstName" id="FirstName" name="FirstName" readonly="readonly" type="text" value="Another"> <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span> </div> <div class="form-group"> <label for="RoleStatus">RoleStatus</label> <select class="form-control RoleStatus" id="RoleStatus" name="RoleStatus" onchange="StatusHasChanged(statusDropdown)"> <option>Approved</option> <option>Denied</option> <option selected="selected">Requested</option> </select> <span class="field-validation-valid" data-valmsg-for="RoleStatus" data-valmsg-replace="true"></span> </div> <div class="form-group"> <label for="Justification">Justification</label> <input class="form-control Justification" id="Justification" name="Justification" type="text" value="Another Tester 1"> <span class="field-validation-valid" data-valmsg-for="Justification" data-valmsg-replace="true"></span> </div> </div> <div class="modal-footer"> <div class="pull-left"> <button id="btnModalClose" class="btn btn-default" data-dismiss="modal" aria-label="Close" onclick="CloseModal()">Cancel</button> </div> <button id="btnUpdateUserRoleRecord" class="btn btn-success" onclick="UpdateUserRoleRecord()">Save</button> </div> </div> </div> </div> <div class="container"> <div id="divResults"> <div class="panel panel-default"> <table class="table table-condensed"> <tr class="row panel-heading"> <th>First Name</th> <th>Last Name</th> <th>Phone</th> <th>Email Address</th> <th>Role</th> <th>Status</th> <th>Updated</th> <th>Module</th> <th></th> </tr> <tr class="row"> <td> <input class="form-control firstName" data-val="true" data-val-length="The field First Name: must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="*First Name is required." id="item_FirstName" name="item.FirstName" readonly="readonly" type="text" value="Another"> </td> <td> <input class="form-control lastName" data-val="true" data-val-length="The field Last Name: must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="*Last Name is required." id="item_LastName" name="item.LastName" readonly="readonly" type="text" value="Tester"> </td> <td> <input class="form-control phone" data-val="true" data-val-regex="Please enter phone number format as ###-###-####." data-val-regex-pattern="^[2-9]\d{2}-\d{3}-\d{4}$" data-val-required="*Phone Number is required." id="item_Phone" name="item.Phone" readonly="readonly" type="text" value="123-456-7890"> </td> <td> <input class="form-control email" data-val="true" data-val-email="Please enter email address format as someone@example.com." data-val-length="The field Email Address: must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="*Email is required." id="item_Email" name="item.Email" readonly="readonly" type="text" value="email@email.com"> </td> <td> <input class="form-control role" id="item_Role" name="item.Role" readonly="readonly" type="text" value="Small Business"> </td> <td> <input class="form-control roleStatus" id="item_RoleStatus" name="item.RoleStatus" readonly="readonly" type="text" value="Requested"> </td> <td> <input class="form-control updateDate" id="shortDateString" name="shortDateString" readonly="readonly" type="text" value="1/01/2017"> </td> <td> <input class="form-control area" id="item_Area" name="item.Area" readonly="readonly" type="text" value="CASL"> </td> <td> <a id="openModal" href="#">Edit</a> </td> </tr> </table> </div> </div> </div> </body> </html>
.panel { border-top: none; } .modal-body { height: 170px; } .modal-body .form-control { min-width: 200px; } .modal-body > .form-group { margin: 0 10px 15px !important; float: left; } .modal-body label { font-size: 12px; } .modal-dialog { width: auto; } .row input { background: #ffffff !important; box-shadow: none !important; border: 0 !important; cursor: pointer !important; max-width: none; padding: 0; height: initial; }
$(document).ready(function () { //function GetRecordForUpdate(controlClicked) { // $('#btnUpdateUserRoleRecord').css('visibility', 'hidden'); // var containerDiv = controlClicked.closest(".row"); // $('#modalUserRoleAdministration').modal(); // FindInputsToTraverse(); //} //Added for testing: $("#openModal").click(function () { $("#modalUserRoleAdministration").modal(); }); function StatusHasChanged(statusDropdown) { var RoleStatus = statusDropdown.val(); var RoleStatusOriginal = $('#RoleStatusOriginal').val(); var JustificationOriginal = $('#JustificationOriginal').val(); if (RoleStatus == RoleStatusOriginal) { //if role hasn't changed $('#Justification').val(JustificationOriginal); $('#Justification').attr("readonly", true); $('#btnUpdateUserRoleRecord').css('visibility', 'hidden'); FindInputsToTraverse(); } else if (RoleStatus != RoleStatusOriginal) { //if role has changed $('#Justification').attr("readonly", false); $('#btnUpdateUserRoleRecord').css('visibility', 'visible'); FindInputsToTraverse(); } //Statuses of "Requested" should not be allowed to have justification changed or saved. This helps prevent a valid status being changed to "Requested". if (RoleStatus == "Requested") { //if role is 'requested' $('#Justification').attr("readonly", true); $('#btnUpdateUserRoleRecord').css('visibility', 'hidden'); FindInputsToTraverse(); } } function FindInputsToTraverse() { var inputs = $('.modal-content .form-group > input.form-control, .modal-content button').not("[style='visibility: hidden;']"); /*redirect last tab to first input*/ //EVERYTHING WORKS, except this function. Bottom one, not top. This top sucks. lastInput.on('keydown', function (e) { if ((e.which === 9 && !e.shiftKey)) { //This skips the save button when it is available. e.preventDefault(); firstInput.focus(); } }); /*redirect first shift+tab to last input*/ //This works 100% firstInput.on('keydown', function (e) { if (e.which === 9) { if (e.shiftKey) { e.preventDefault(); lastInput.focus(); } } }); } });

Related: See More


Questions / Comments: