-
Popup with Bootstrap
almost 9 years ago
Welcome to Findnerd. In web development we need popup for different requirements then we start finding the third party jquery plugins which could meet our requirement. but sometimes we puzzle with these plugins. Here we are describing one other way to meet your requirements that is bootstrap popups. You can simply implement it with bootstrap. Please have a look.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template On Findnerd</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="popover"]').popover({ placement : 'top' }); }); </script> <style type="text/css"> .bs-example{ margin: 150px 50px; } .popover-examples{ margin-bottom: 20px; } </style> </head> <body> <div class="bs-example"> <div class="popover-examples"> <a href="#" class="btn btn-primary" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Welcome guys">Welcome</a> <a href="#" class="btn btn-success" data-toggle="popover" tabindex="1" data-trigger="focus" title="Popover title" data-content="Way to process">to</a> <a href="#" class="btn btn-info" data-toggle="popover" tabindex="2" data-trigger="focus" title="Popover title" data-content="A platform to search findnerd">Findnerd</a> <a href="#" class="btn btn-warning" data-toggle="popover" tabindex="3" data-trigger="focus" title="Popover title" data-content="Start searching">guys</a> </div> </div> </body> </html>In above example we build four different popups with different designs.
0 Comment(s)