Creating Popup in PHP

Introduction

In this article I will explain creation of a Popover in PHP using Twitter Bootstrap file. The Twitter Bootstrap file full package is supported for creating a navbar, dropdown, Scrollspy, and popover. For creating a popover you will  require the Twitter Bootstrap package. You can download this package using this link: http://twitter.github.com/.

Creating popover using Simple jQuery functions and HTML5.

Code Explanation
<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script> Include jQuery file.
<script src="/twitter-bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script> Include Twitter Bootstrap Tooltip file.
 
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script> Include Twitter BootstrapPopover file.
 
$(function () To prepare the document. jQuery command.
$("#popup").popover(); id popup is accessed and popover() is

Example1

<!DOCTYPE html>  

<html lang="en">  

<head>  

<meta charset="utf-8">  

<title>Twitter Bootstrap Popovere</title>  

<meta name="description" content="Creating Modal Window with Twitter Bootstrap"> 

<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  

</head> 

<body> 

<div class="container"> 

<h2>Creating Popover with Twitter Bootstrap</h2> 

<div class="well"> 

<a href="#" id="popup" class="btn btn-danger" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> 

</div> 

</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script> 

<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script> 

<script>

    $(function () {

        $("#popup").popover();

    });

</script> 

</body> 

</html>

Output

popover1.jpg

Type of the replacement of the position could also be string or perform, default replacement is 'right', top, bottom and left square measure different values which can be used. It's accustomed the verify the position of the text placement the anchor text.

Example2

<!DOCTYPE html>  

<html lang="en">  

<head>  

<meta charset="utf-8">  

<title>Twitter Bootstrap Popover with placement option Example</title>  

<meta name="description" content="Creating Modal Window with Twitter Bootstrap"> 

<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  

<style> 

a

margin-left : 400px

</style> 

</head> 

<body> 

<div class="container"> 

<h2>Creating Popover with placement option</h2> 

<div class="well"> 

<a href="#" id="popup" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> 

</div> 

<div class="well"> 

<a href="#" id="popup_left" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> 

</div> 

<div class="well"> 

<a href="#" id="popup_top" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> 

</div> 

<div class="well"> 

<a href="#" id="popup_bottom" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> 

</div> 

</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script> 

<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script> 

<script>

    $(function () {

        $("#popup").popover();

        $("#popup_left").popover({ placement: 'left' });

        $("#popup_top").popover({ placement: 'top' });

        $("#popup_bottom").popover({ placement: 'bottom' });

    });

</script> 

</body> 

</html>

Output

Placement for right side.

popover2.jpg

Placement for left side.

popover3.jpg

Placement for up side.

popover4.jpg

Placement for down side.

popover5.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all