<body>
<div class="container" style="margin-top:20px;">
<div class="col-md-12 text-center">
<div class="panel panel-default">
<div class="panel-body">
<form action="#">
<div class=" col-md-4 col-md-offset-4">
<input type="text" id="F_name" class="form-control"> <br>
<button id="SubmitName" class="btn-warning">Submit</button><br>
</div><br> <br>
</form>
<div class="col-md-12 text-center " style="display:none;" id="msg1">
<p>Hi Mr. <span id="print1" > </span></p>
</div>
</div>
</div>
</div>
<div id="alertModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="alert alert-danger alert-dismissable">
<a href="#" class="close" data-dismiss="modal" aria-label="close">×</a>
<strong>Warning! </strong> Please Enter Name First
</div>
</div>
</div>
<!-- confirm Modal -->
<div id="confrimModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" >
<p>Shuld we print the message?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="confirmY" >OK</button>
<button type="button" class="btn btn-default" id="confirmN" data-dismiss="modal" >Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Script:
<script>
$(document).ready(function(){
$("#SubmitName").click(function(){
var F_nameVal = $("#F_name").val();
var trimF_name = F_nameVal.trim();
if(trimF_name == ""){ //if name is emty
$("#alertModal").modal('show');
$("#msg1").hide();
}
else{
// if name is entered
$("#confrimModal").modal('show');
$("#confirmY").click(function(){
$('#confrimModal').modal('hide');
$("#msg1").show(500);
$("#print1").animate({fontSize:'20px'}, 'slow');
$("#print1").html("<strong style='text-transform:uppercase;'>" + F_nameVal + "</strong>");
});
}
});
});
</script>
Comments
Post a Comment