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

PHP Login and Registration script

-
Image
Login and register code with ajax function Watch my video for better understanding See this in video : Login and register Jquery library file: Download Source code: Database CREATE TABLE `users` ( `user_id` int(11) NOT NULL, `username` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `password` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; dbconnect.php $conn = new mysqli("localhost","root","","user_info"); if($conn->connect_error){ die($conn->connect_error); } register.php Register Register Already a member? Login login.php login.php Login Not a member? Register style.css .register_form,.Login_form,.user_page{ background:#ffffff; max-width:320px; width:100%; box-shadow:0px 0px 10px rgba(0,0,0,0.5); margin:0 auto; padding:10px 15px; } input{ outline:none; width:100%; border:1px solid #fffff...
Read more

Multiple image upload to database and display from it

-
Image
Upload image into the database and retrieve from it Video: Multiple image upload and display from database Create the database name as 'image' and just copy this table given below Database CREATE TABLE IF NOT EXISTS `multiple` ( `id` int(255) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `image` longblob NOT NULL, PRIMARY KEY (`id`) ) Html: In this form tag make sure that you set the '[ ]' in the input tag and 'multiple' use to select the multiple image PHP: (upload and display) mysql_connect("localhost","root",""); mysql_select_dB("image"); if(isset($_POST["submit"])){ $filename = $_FILES['img']['name']; $file_tmp = $_FILES['img']['tmp_name']; $filetype = $_FILES['img']['type']; $filesize = $_FILES['img']['size']; for($i=0; $i "; } } } } $res = mysql_query("SELECT * FROM multiple"); ...
Read more

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