"Modal Usage for Bootstrap Forms"
Bootstrap 3.3.0 Snippet by tradesouthwest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<div class="container">
<div class="row">
<!--========== First Modal ==========-->
<article class="col-md-4 well">
<h3 class="page-header text-center">Start Quiz Now<br />
<small>multiple choice question modal</small>
</h3>
<br><hr>
<div class="text-center">
<a class="btn btn-success" href="#successModal" data-toggle="modal"><i class="glyphicon glyphicon-eye-open"></i> Start Quiz</a>
</div>
<!-- Modal -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-success">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">[ × ]</button>
<h2><i class="glyphicon glyphicon-cloud"></i> · Do you feel like a cloud?</h2>
</div>
<div class="modal-body">
<div class="col-md-12 radio-choices">
<div class="col-md-6 col-xs-6 radio-left">
<form role="form">
<div class="radio">
<label><input type="radio" name="opta">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optb">Option 2</label>
</div>
<div class="radio">
<label><input type="radio" name="optc">Option 3</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.modal-header-success {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #5cb85c;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-header-warning {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: orange;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-header-primary {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #112299;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
body{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: