Skip to content

Instantly share code, notes, and snippets.

@max-dark

max-dark/callback_form.html

Last active July 13, 2016 06:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save max-dark/4397147e398e667c1fe5145c4d74cbaf to your computer and use it in GitHub Desktop.
Save max-dark/4397147e398e667c1fe5145c4d74cbaf to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 Modal Dialog Example
Raw
callback_form.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 3 Modal Dialog Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- #include <jquery-1-12> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- #include <jquery-1-12> -->
<!-- #include <bootstrap-3-3> -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- #include <bootstrap-3-3> -->
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
border-radius: 0;
border: none;
}
.panel {
padding-left: 0;
padding-right: 0;
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60pt;
}
footer {
position: absolute;
bottom: 0;
height: 60pt;
background-color: dimgrey;
min-width: 100%;
border-radius: 0;
border: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-default"></nav>
<div class="container-fluid">
<div class="row content">
<div class=" col-md-4"></div>
<div class="panel panel-primary col-md-4">
<div class="panel-heading">
Bootstrap 3 Modal Dialog Example
</div>
<div class="panel-body">
<h2>
<!-- callback button start -->
<a data-toggle="modal" data-target="#callback_form" role="button">
<span class="glyphicon glyphicon-phone-alt"> click me</span>
</a>
<!-- callback button end -->
</h2>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
<footer class="container-fluid text-center">
<span class="glyphicon glyphicon-copyright-mark"></span>
</footer>
<!-- callback form start -->
<div class="modal fade" id="callback_form" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-phone-alt"></span> Заказать звонок</h4>
</div>
<div class="modal-body">
<form id="callback" class="" role="form">
<div class="form-group">
<input class="form-control" type='text' id='name' placeholder="Ваше имя"
required/>
</div>
<div class="form-group">
<input class="form-control" type="text" id="phone" placeholder="Номер для связи"
required/>
</div>
<textarea class="form-control" placeholder="Комментарии"></textarea>
</form>
</div>
<div class="modal-footer">
<button class="form-control btn btn-primary" type='button' id='call'>
Отправить <span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</div>
</div>
<!-- callback form end -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment