Simple Jquery Plugin: Jquery POPUP with multiple options

Create Index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".ref").click(function(){

$(".cont").attr("class","contentwa");

$(".contentwa").html($(this).attr('contentwa')+ "<a id='closeme' href='#'>Close Me</a>");
});
$(document).click(function(e){
 if(e.target.id=="closeme"){
$(".contentwa").attr("class","cont").html('');

}
});
});

</script>
<style>
body {
 background:#333;
}
.main-wrapper {
 padding:20px;
 background:#ccc;
 margin:auto;
 overflow:auto;
}
.main-header {
 background: #036;
 margin: auto;
 overflow: auto;
 padding: 10px;
}
.about {
 background: #036;
 margin: auto;
 overflow: auto;
 padding: 10px;
 margin-bottom:10px;
}
.about h2 {
 color:#fff;
 text-align:center;
}
.intro {
 background: #ddd;
 font-size: 150%;
 height: 200px;
 padding: 10px;
}
.ref {
 background:#99FF00;
 padding:10px;
 float:left;
 margin: 10px;
 cursor: pointer;
}
.closeme:before {
 background: #0066FF;
 padding: 10px;
 float: left;
 position: absolute;
 top: 263px;
 display:none;
}
.closeme:after {
 display:block;
}
.contentwa {
 margin:auto;
 width:400px;
 height:400px;
 background:#999999;
 color:#000000;
 padding:10px;
}
.contentwa h2 {
 font-weight:bold;
 color:#0099FF;
}
.contentwa p {
 color:#333;
 text-align:justify;
}
</style>
</head>
<body>
<div class="main-wrapper">
  <div class="about">
    <h2>Jquery POPUP Window</h2>
  </div>
  <div class="main-header">
    <div class="ref" contentwa="<h2>jQuery</h2><p>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on over 60% of the top million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.</p>">JQuery</div>
    <div class="ref" contentwa="<h2>Html5</h2><p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardized in 1997.

Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.</p>">Html5</div>
    <div class="ref" contentwa="<h2>JavaScript</h2>
<p>JavaScript, also known as ECMAScript (the untrademarked name used for the standard), is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. JavaScript (at least the strict subset asm.js) is also considered an assembly language of the web – a compile target of source-to-source compilers – for making client side web applications, using other programming languages, supported by all the major browsers without plug-ins. It is also used in server-side network programming with runtime environments such as Node.js, game development and the creation of desktop and mobile applications.</p>">JavaScript</div>
  </div>
  
  <div class="cont"></div>
</div>

</body>
</html>

Tuesday, 7 July 2015

Jquery POPUP with multiple options

Create Index.html

No comments:

Post a Comment