JavaScript-Popup

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/script.js"></script>
<style>
#overlay {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            background: #999;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            z-index: 100;
        }

        .popupcontent {
            padding: 10px;
        }
#get_popup {
            display: none;
            position: absolute;
            top: 70%;
            left: 50%;
            background: #fff;
            width: 500px;
            height: 250px;
            margin-left: -250px; /*Half the value of width to center div*/
            margin-top: -250px; /*Half the value of height to center div*/
            z-index:1200;
        }

#get_popupclose {
            float: right;
            padding: 10px;
            cursor: pointer;
        }
</style>
</head>

<body>

            <button class="search-area" id="get_button">
            <h1 align="center" style="color:#000 !important;">Get Started</h1>       
            </button>
           
           
<!-- open popup one -->

<div id="overlay"></div>

<div id="get_popup">
    <div class="popupcontrols">
        <span id="get_popupclose">X</span>
    </div>
    <div class="get_popupcontent">
   
    <br />
        <br />
        <br />
        <br />
       
        <table width="80%" style="margin:auto">
        <tr>
        <td><button type="button" class="item-price" style="background:#e9573b;color:#fff;padding:5px;margin:5px;width:100%;" id="button" />Canteen Management</button></td>
        </tr>
        <tr>
        <td><button type="button" class="item-price" style="background:#e9573b;color:#fff;padding:5px;margin:5px;width:100%;" id="employee_signin" />Are You Employee</button></td>
        </tr>
        </table>
    </div>
</div>

<!-- close one popup -->

<script type="text/javascript">

var closePopup = document.getElementById("get_popupclose");
    var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var get_button = document.getElementById("get_button");


    // Close Popup Event

//popupt window 3
    get_button.onclick = function() {
        overlay.style.display = 'block';
        get_popup.style.display = 'block';
get_button.style.display='none';

}
get_popupclose.onclick = function() {
        overlay.style.display = 'none';
    get_popup.style.display = 'none';
get_button.style.display='block';

    };

</script>
</body>
</html>


events in javascript: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Links and Dynamic Css</title>
</head>
<body>

<h1 id="heading">Working with dynamic css</h1>
<p id="para">hello</p>

<input type="button" id="button1" value="add css"/>
<input type="button" id="buttonid" value="open Google Page"/>
<input type="button" id="dynamiclink" value="Dynamic Link" />
<input type="button" id="mydynamiccss" value="Dynamic css" />

<script>


function addcss(){
var jit=document.getElementById("heading");
jit.style.background="#f00";
jit.style.color="#fff";
jit.style.padding="50px";
jit.style.width="200px";
jit.style.border="2px solid #000";
}

function open_window(){
window.open("http://www.google.com");
}

function dynamiclink(){
window.location="http://www.facebook.com";
}

function adddynaiccss (){
var mydynamiccss=document.getElementById("para");
mydynamiccss.style.background="orange";
mydynamiccss.style.textAlign="center";
}


var addbutton=document.getElementById("button1");
addbutton.addEventListener("click",addcss);

var logolink=document.getElementById("buttonid");
logolink.addEventListener("click",dynamiclink);

var dynamiclink=document.getElementById("dynamiclink");
dynamiclink.addEventListener("click",open_window);

var mycssbutton=document.getElementById("mydynamiccss");
mycssbutton.addEventListener("click",adddynaiccss);


</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Child Development and Pedagogy - MCQ

జీన్ పియాజే సిద్ధాంతంలో, పిల్లలు జ్ఞాన వికాసం దశల్లో కనీస వయస్సు ఎంత? A) 2 సంవత్సరాలు B) 7 సంవత్సరాలు C) 0 సంవత్సరాలు D) 12 సంవత్సరాలు Answer : C) 0 సంవత్సరాలు కోహల్బర్గ్ నైతిక అభివృద్ధి సిద్ధాంతంలో, ఏ దశలో పిల్లలు చట్టం మరియు నిబంధనల ఆధారంగా నైతికతను అర్థం చేసుకుంటారు? A) ప్రీ-కన్వెన్షనల్ B) కన్వెన్షనల్ C) పోస్ట్-కన్వెన్షనల్ D) సెన్సరీమోటార్ Answer : B) కన్వెన్షనల్ చామ్స్కీ భాషా అభివృద్ధి సిద్ధాంతం ప్రకారం, పిల్లలు భాష నేర్చుకోవడానికి సహజంగా ఉన్న పరికరం ఏది? A) లాంగ్వేజ్ డెవలప్‌మెంట్ పథకం B) యూనివర్సల్ గ్రామర్ C) లాంగ్వేజ్ ఆక్విజిషన్ డివైస్ (LAD) D) ఫార్మల్ ఆపరేషనల్ Answer : C) లాంగ్వేజ్ ఆక్విజిషన్ డివైస్ (LAD) ఎరిక్ ఎరిక్సన్ సిద్ధాంతంలో, పిల్లలు 12-18 సంవత్సరాల మధ్య ఏ సామాజిక సంక్షోభాన్ని ఎదుర్కొంటారు? A) ట్రస్ట్ vs. మిస్ట్రస్ట్ B) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ C) ఇండస్ట్రీ vs. ఇన్ఫీరియారిటీ D) ఆటోనమీ vs. షేమ్ Answer : B) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ కార్ల్ రజర్స్ సిద్ధాంతం ప్రకారం, వ్యక్తులు పూర్తి స్థాయి వ్యక్తిత్వ అభివృద్ధి పొందడానికి అవసరమైన ప్రధాన అంశం ఏది? A) శిక్ష B) నిష్కపట సా...
Read more

Child Development and Pedagogy - MCQ-02

  1. బాలల అభివృద్ధి (Child Development) బాలల అభివృద్ధిలో 'సంవృద్ధి' అంటే ఏమిటి? A) శారీరక పెరుగుదల B) మానసిక పరిణామం C) సామాజిక మరియు భావోద్వేగ అభివృద్ధి D) పైవన్నీ Answer : D) పైవన్నీ పియాజే సిద్ధాంతం ప్రకారం, పిల్లలు జ్ఞానాన్ని ఎలా నిర్మించుకుంటారు? A) వారి అనుభవాల ద్వారా B) పుస్తకాల ద్వారా మాత్రమే C) ఇతరుల సూచనల ద్వారా D) టీవీ చూస్తూ Answer : A) వారి అనుభవాల ద్వారా ఎరిక్ ఎరిక్సన్ సిద్ధాంతం ప్రకారం, పిల్లలు 3-6 ఏళ్లలో ఏ సామాజిక సంక్షోభాన్ని ఎదుర్కొంటారు? A) ట్రస్ట్ vs. మిస్ట్రస్ట్ B) ఇనిషియేటివ్ vs. గిల్ట్ C) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ D) ఆటోనమీ vs. షేమ్ Answer : B) ఇనిషియేటివ్ vs. గిల్ట్ వాట్సన్ మరియు బాండురా అనే శాస్త్రవేత్తల సిద్ధాంతం ఏ అంశంపై దృష్టి సారిస్తుంది? A) శారీరక అభివృద్ధి B) సామాజిక అభివృద్ధి C) అభ్యాసం ద్వారా జ్ఞాన నిర్మాణం D) ఆబ్జర్వేషనల్ లెర్నింగ్ (పరిశీలన ద్వారా అభ్యాసం) Answer : D) ఆబ్జర్వేషనల్ లెర్నింగ్ 2. అభ్యాసాన్ని అర్థం చేసుకోవడం (Understanding Learning) విగోట్స్కీ యొక్క "జోన్ ఆఫ్ ప్రోక్సిమల్ డెవలప్‌మెంట్" (ZPD) అంటే ఏమిటి? A) పిల్లలు స్వతం...
Read more

jQuery-Banner

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Slide Creation</title> <script  src="myjquery.js"></script> <script src="mycycle.js"></script> </head> <body> <div id="mybanner"> <img src="images/1.jpg">     <img src="images/2.jpg">     <img src="images/3.jpg">     <img src="images/4.jpg"> </div> <script> $(document).ready(function() {     $('#mybanner').cycle({     fx: 'scrollRight' }); }); </script> </body> </html>
Read more