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.

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

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">