Bootstrap Popover Form Example: This post explains about inserting html form into bootstrap popover. Bootstrap popover plug-in is a small overlay used to show some additional content in a webpage. You can place plain text, image, YouTube videos or other html inside bootstrap popover.
Normally you have to rely on JavaScript to invoke and to place content inside popover. But what if you want to insert an html form inside popover? There is a good workaround to do it and here is the method to place form within bootstrap popover.
Bootstrap Popover Form Example:
First we'll need a button element to show popover when clicked.
<button id="subscribe" type="button" class="btn btn-lg btn-default" data-toggle="popover">Subscribe</button>
Then add markup for a form of your choice and wrap it inside a <div> container to be placed inside popover. Also you have to keep it hidden and should be invoked via javascript.
<div id="popover-form" class="hide">
<form id="myform" class="form-inline" role="form">
<div class="form-group">
<input id="email" type="email" placeholder="Enter Email-ID" class="form-control" />
</div>
<button type="submit" class="btn btn-warning">Subscribe</button>
</form>
</div>
Now everything is in place. All we have to do is to invoke the popover element using popover() method. And here is the jquery snippet for that.
<script type="text/javascript">
$("#subscribe").popover({
title: '<h4>Newsletter Subscription</h4>',
container: 'body',
placement: 'bottom',
html: true,
content: function(){
return $('#popover-form').html();
}
});
</script>
That's it. Open the webpage in browser and click on the 'Subscribe' button. A popover will hang out at its bottom with a form inside.
Note that I have increased popover's width to make the form elements ('email' input & 'subscribe' button) to stay in a single line.
And here's the css style for extending the width,
.popover {
width: 304px;
max-width: 100%;
}
Also I have used javascript to set all popover options. But alternatively you can use data- attributes to set them inside the button element like this,
<button id="subscribe" type="button" class="btn btn-lg btn-default" data-toggle="popover" data-placement="bottom" data-title="Newsletter Subscriptio" data-container="body" data-html="true">Subscribe</button>
Here is the complete page created for the demo.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Bootstrap Popover Form Example</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.popover {
width: 304px;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-md-12 text-center well">
<button id="subscribe" type="button" class="btn btn-lg btn-default" data-toggle="popover">Subscribe</button>
<div id="popover-form" class="hide">
<form id="myform" class="form-inline" role="form">
<div class="form-group">
<input id="email" type="email" placeholder="Enter Email-ID" class="form-control" />
</div>
<button type="submit" class="btn btn-warning">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$("#subscribe").popover({
title: '<h4>Newsletter Subscription</h4>',
container: 'body',
placement: 'bottom',
html: true,
content: function() {
return $('#popover-form').html();
}
});
</script>
</body>
</html>
Also Read: Bootstrap Search Form with Dropdown Example
So that explains about bootstrap popover with form. I hope you find this bootstrap tutorial useful. Meet you in another interesting post.
No comments:
Post a Comment