Jquery code to simple popup onclick

-
Simple popup onclick using jquery


See this in video: Simple popup
Html page:
<a class="open" data-open="popup" href="https://www.blogger.com/blogger.g?blogID=1018919755583750916#"> Open</a>

X
This is the tutorial to pop-up the div content onclick using JQUERY with more effective,attractive and responsive manner.

Css:
.popup{ top:0px; left:0px; width:100%; height:100%; position:fixed; display:none; background:rgba(0,0,0,0.75); } .inner{ max-width:650px; width:90%; top:50%; position:absolute; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); box-shadow:0px 0px 6px rgba(0,0,0,0.5); background:#FFFFFF; color:#000000; } .closing{ display:inline-block; position:absolute; width:30px; height:30px; padding-top:4px; transition:0.5s all; top:0px; left:0px; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); background:#CCCCCC; font-size:25px; text-align:center; font-family: Arial, Helvetica, Sans-serif; text-decoration:none; color:#000000; border-radius:100px; } .closing:hover{ -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:#FF0000; color:#FFFFFF; text-decoration:none; transition:0.5s all; }

Jquery:
<script src="jquery-2.2.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //open $('[data-open]').click(function(e){ $target = $(this).attr("data-open"); $('[data="'+ $target +'"]').fadeIn(350); e.preventDefault(); }); //close $('[data-close]').click(function(e){ $target = $(this).attr("data-close"); $('[data="'+ $target +'"]').fadeOut(350); e.preventDefault(); }); }); </script>

Friends, If you have any questions please leave your questions in comment box.Thankyou

Comments

Post a Comment

Popular posts from this blog

Java program to display diamond pattern

-
Image
Diamond pattern: Diamond pattern Program Example: import java.util.Scanner; public class Diamond { public static void main(String[] args) { int i,j,k,p,q,r; Scanner sc = new Scanner(System.in); System.out.print("Enter the values: "); int n = sc.nextInt(); int spaces = n-1; for(i=0;i<n;i++) { for(j=0;j<spaces;j++) { System.out.print(" "); } for(k=0;k<=i;k++) { System.out.print("* "); } spaces--; System.out.println(); } spaces = 1; for(p=(n-1);p>0;p--) { for(q=0;q<spaces;q++) { System.out.print(" "); } for(r=0;r<p;r++) { System.out.print("* "); } System.out.println(); spaces++; } } } Output: Enter the values: 7       *      * *     * * *    * * * *   * * * * *  * * * * * * * * * * * * *  * * * * * *   * * * * *    * * * *     * * ...
Read more

Prime Number Program in Java

-
Image
Prime Number Program in Java: The prime number is a natural number who value is greater than 1 and can be divisible by 1 and by itself. The number of counts to find the prime numbers is 2 because it can divisible only by 1 and by itself For example: 6 - can be divisible by 1x6,2x3,3x2,6x1. where the count is 4 and it is not a prime number 7 - can be divisible by 1x7,7x1. where the count is 2 and it is a prime number Example 1: Program to check whether the given number is prime number or not import java.util.Scanner; public class Primenumbers { public static void main(String[] args) { int i =2; boolean flag = true; System.out.print("Enter the number to find it is prime or not: "); Scanner sc = new Scanner(System.in); int n = sc.nextInt(); if(n<0) { System.out.println("The prime number cannot be negative"); } else { while(i<n) { if(n%i==0) { flag = false; break; } i++;...
Read more

Php : Image uploading and retrieving image from database

-
Image
Upload image into the database and retrieve from it See this in video:    Image upload Create the database name as 'image' and just copy this table given below Database CREATE TABLE IF NOT EXISTS `upload` ( `id` int(255) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `image` longblob NOT NULL, PRIMARY KEY (`id`) ) Html: PHP: (upload and display) mysql_connect("localhost","root",""); mysql_select_db("image"); if(isset($_POST["submit"])){ $filename = addslashes($_FILES['img']['name']); $tmpname = addslashes(file_get_contents($_FILES['img']['tmp_name'])); $filetype = addslashes($_FILES['img']['type']); $filesize = addslashes($_FILES['img']['size']); $array = array('jpg','jpeg'); $ext = pathinfo($filename, PATHINFO_EXTENSION); if(!empty($filename)){ if(in_array($ext, $array)){ mysql_query("Insert into ...
Read more