"Create a TechTicket (glass)"
Bootstrap 3.1.0 Snippet by rpenfold

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!--BUGS--> <!-- -blur effect goes away after dismissing modal -can submit ticket without a category --> <body> <div id="wrap"> <div class="container" id="alert-dialogue"></div> <!-- Button trigger modal --> <div class="container"> <button class="btn btn-primary btn-lg text-center" id="btnCreateTicket" data-toggle="modal" data-target="#createTechTicket" onclick="clearContents(message)"> Create TechTicket </button> </div> </div> </body> <!-- Modal --> <div class="modal fade" id="createTechTicket" tabindex="-1" role="dialog" aria-labelledby="createTicketLabel" aria-hidden="true"> <div class="container"> <div class="modal-header"> <button type="button" class="close" id="closeModal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times</span></button> <h4 class="modal-title" id="createTicketLabel">Create a TechTicket</h4> </div> <div class="row"> <div class="col-md-4"> <!--MESSAGE BOX--> <br style="clear: both"> <div class="form-group"> <label id="messageLabel" for="message">Message </label> <textarea class="form-control input-sm" type="textarea" id="message" placeholder="Enter your message here" maxlength="500" rows="10" autofocus ></textarea> <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span> </div> <br style="clear: both"> </div><!--end message box--> <div class="col-md-2"> <!--CATEGORY DROPDOWN MENU--> <br style="clear: both"> <div class="form-group"> <label for="category">Category</label> <select class="form-control" id="category" name="category"> <option value="0" hidden selected>Choose Category</option> <option value="1">StyleBox</option> <option value="2">PRV</option> <option value="3">Commissions</option> <option value="4">Party</option> <option value="5">Other</option> </select> </div> </div> <br style="clear: both"> </div><!--end dropdown menu--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button class="form-control input-sm btn btn-primary disabled" id="btnReview" name="btnReview" type="button" data-dismiss="modal" data-target="#reviewTechTicket" data-toggle="modal" style="height: 35px; width: 75px">Review</button> </div> </div> </div> <!--REVIEW MODAL--> <div class="modal fade" id="reviewTechTicket" tabindex="-1" role="dialog" aria-labelledby="reviewModalLabel" aria-hidden="true"> <div class="container"> <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="reviewModalLabel">Review Your TechTicket</h4> </div> <div class="row"> <p id="reviewMessage"></p> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#createTechTicket">Edit</button> <button class="form-control input-sm btn btn-primary" id="btnSubmit" name="btnSubmit" type="button" data-dismiss="modal" style="height: 35px; width: 75px"> Submit</button> </div> </div> </div> </div>
/*body.modal-open #wrap{*/ /*.modal-open #wrap{ -webkit-filter: blur(7px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); }*/ .modal-backdrop { background: #b4b4b4; } .blur{ -webkit-filter: blur(7px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); }
//CALCULATE REMAINING CHARACTERS $(document).ready(function(){ $('#characterLeft').text('500 characters left'); $('#message').keydown(function () { var max = 500; var len = $(this).val().length; if (len >= max) { $('#characterLeft').text('You have reached the limit'); } else { var ch = max - len; $('#characterLeft').text(ch + ' characters left'); if (ch < 500 && category.value > 0){ $('#btnReview').removeClass('disabled'); } else { $('#btnReview').addClass('disabled'); } } }); }); //ENSURE THAT EVERYTHING IS FILLED OUT BEFORE BEING ABLE TO SUBMIT*********************** $(document).ready(function(){ $('#category').click(function () { if(1==1){ $('#btnReview').removeClass('disabled'); } }); }); //CLEAR CONTENTS OF TEXTAREA function clearContents(element){ element.value = ''; $('#characterLeft').text('500 characters left'); category.value = 0; } //NOTIFY USER OF ACTION $(function(){ $('#btnSubmit').click(function(result){ var result = 1;//test the output message var success = '<div class="alert alert-success fade in" role="alert">' + '<a class="close" data-dismiss="alert">&times</a>' + '<strong><span class="glyphicon glyphicon-ok"></span> Your TechTicket was submitted successfully</strong>' + '<div>You will be notified when your ticket has been resolved. Thank you!</div>' + '</div></div>'; var fail = '<div class="alert alert-danger fade in" role="alert">' + '<a class="close" data-dismiss="alert">&times</a>' + '<strong><span class="glyphicon glyphicon-remove"></span> Oops! Something went wrong.</strong>' + '<div>Please contact Technical Support if the problem persists.</div>' + '</div></div>'; if(result == 1){ var output = success; } else { var output = fail; } $('#alert-dialogue').append(output); }); }); //ADD BLUR EFFECT TO PAGE $(function (){ $('#btnCreateTicket').click(function(){ $('#wrap').addClass('blur'); }); }); //REMOVE BLUR EFFECT FROM PAGE $(function (){ $('#closeModal').click(function(){ $('#wrap').removeClass('blur'); }); });

Related: See More

Rotating CSS Card
Create Beautiful Themes From Images
Magnifying Glass for Images

Questions / Comments: