Skip to content

Instantly share code, notes, and snippets.

@chez14

chez14/Fernando.html

Last active April 16, 2016 12:57
Show Gist options
  • Save chez14/0dad9b64b0e9b8d3d23b9654397c8b44 to your computer and use it in GitHub Desktop.
Save chez14/0dad9b64b0e9b8d3d23b9654397c8b44 to your computer and use it in GitHub Desktop.
Download ZIP
Latihan pake Modal sama Form inputnya Bootstrap~
Raw
Fernando.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"/></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.7/jquery.slimscroll.js" type="text/javascript"></script>
<title>Tes~</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12" style="height:50px;"></div>
</div>
<div class="row">
<div class="modal fade" tabindex="-1" role="dialog" id="tes">
<div class="modal-dialog">
<div class="modal-content" role="document">
<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">Hasilnya disini! :D</h4>
</div>
<div class="modal-body">
<p id="hasil"></p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="tes2">
<div class="modal-dialog">
<div class="modal-content" role="document">
<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">Hasilnya disini! :D</h4>
</div>
<div class="modal-body">
<p id="hasil2"></p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="col-md-3">
<!-- TODO: Bikin form -->
<form class="form" action="tes.php" method="post"> <!-- ini opsional -->
<div class="form-group">
<label for="input-satu">Nama</label>
<input type="text" class="form-control" id="input-satu" placeholder="Massukan nama">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="Tes!" id="buttonnya"/>
<script>
$(document).ready(function(e){
$('#buttonnya').click(function(e){
$('#hasil').text($('#input-satu')[0].value);
$('#tes').modal('show');
});
});
</script>
</div>
</form>
</div>
<div class="col-md-3">
<!-- TODO: Bikin form -->
<form class="form" action="tes.php" method="post"> <!-- ini opsional -->
<div class="form-group">
<label for="input-satu">Nama</label>
<input type="text" class="form-control" id="input-satu2" placeholder="Massukan nama">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="Tes!" id="buttonnya2"/>
<script>
$(document).ready(function(e){
$('#buttonnya2').click(function(e){
$('#hasil2').text($('#input-satu2')[0].value);
$('#tes2').modal('show');
});
});
</script>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function(e){
$('#bacaan').slimScroll({
height: '250px'
});
});
</script>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary">Agree</button>
<button type="button" class="btn">Disagree</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment