Bootstrap Snippet Modal Demo using HTML Javascript

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="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Bootstrap trigger to open modal -->
<a data-toggle="modal" href="#rating-modal">Write a Review</a>
 
<div class="hide fade modal" id="rating-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2>Your Review</h2>
</div>
 
<div class="modal-body">
<!-- The async form to send and replace the modals content with its response -->
<form class="form-horizontal well" data-async data-target="#rating-modal" action="" method="POST">
<fieldset>
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input name="name" type="text"></input></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input name="email" type="text"></input></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input name="phone" type="text"></input></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"></input></td>
                </tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jQuery(function($) {
$('form[data-async]').live('submit', function(event) {
var $form = $(this);
var $target = $($form.attr('data-target'));
 
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
 
success: function(data, status) {
$target.html(data);
}
});
 
event.preventDefault();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal Demo"
Bootstrap 2.3.2 Snippet by escapedlion

Related: See More

Questions / Comments:

"Modal Demo" Bootstrap 2.3.2 Snippet by escapedlion

Related: See More

Questions / Comments:

"Modal Demo"
Bootstrap 2.3.2 Snippet by escapedlion