www.webdeveloper.com
Results 1 to 13 of 13

Thread: How to create popop window with Css(or mayabe JavaScript) in the code I've written?

  1. #1
    Join Date
    Sep 2013
    Posts
    18

    How to create popop window with Css(or mayabe JavaScript) in the code I've written?

    Hi everyone, I'm new here. I've written a code that contains CSS & HTML & JavaScript , in the code below There must be 4 buttons next to an area , & by clicking each buttons , you should see different information [using JavaScript] , but here I don't want to replace the new information by previous content of <p> tag! I want to use a popup window [similar to alert or text box somehow] to show the content of my buttons, I need the exact code to see if the result is as the same as what I've wanted or not, so I'll be glad to write me the exact code & complete my code below :

    Thanks everyone

    <!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>Untitled Document</title>
    </head>

    <style>
    p{
    position:relative;
    width:800px;
    height:400px;
    background-color:#060;
    font-size:36px;
    alignment-adjust:central;
    margin-top:10px;
    vertical-align:central;
    }


    ul{
    list-style:none;
    position:absolute;
    right:0;
    top:0px;
    }

    ul li button{
    width:100px;
    margin:5px;
    padding:30px;
    }

    #blanket {
    background-color:#111;
    opacity: 0.65;
    *background:none;
    position:absolute;
    z-index: 9001;
    top:0px;
    left:0px;
    width:100%;
    }

    #popUpDiv {
    position:absolute;
    background:url(pop-back.jpg) no-repeat;
    width:400px;
    height:400px;
    border:5px solid #000;
    z-index: 9002;
    }

    #popUpDiv { a position:relative; top:20px; left:20px}
    </style>

    <body>
    <div align="center" >
    <p rows="4" cols="50" id="demo">
    Click each buttons to read the related information!
    </p>
    </div>


    <ul>
    <li><button type="button" onclick="myFunction(1)" class="bt">Farnoosh</button></li>
    <li><button type="button" onclick="myFunction(2)" class="bt">Hamed</button></li>
    <li><button type="button" onclick="myFunction(3)" class="bt">Shayan </button></li>
    <li><button type="button" onclick="myFunction(4)" class="bt">Majid</button></li>
    </ul>

    </body>
    </html>
    <script>
    function myFunction(v)
    {
    var r = document.getElementsByClassName("bt");
    var x = document.getElementById("demo");
    switch (v)
    {
    case 1:
    x.innerHTML="Farnoosh Hejazi is one of the webdevelopers works at Datis Netwrok, her field is JavaScript.";
    break;
    case 2:
    x.innerHTML="Hamed is one of the webdevelopers works at Datis Netwrok, his field is everything!.";
    break;
    case 3:
    x.innerHTML="Shayan is one of the webdevelopers works at Datis Netwrok, his field is HTML & CSS.";
    break;
    case 4:
    x.innerHTML="Majid is one of the webdevelopers works at Datis Netwrok, his field is Networking.";
    break;
    default:
    break;
    }
    }

    </script>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    case 1:
    alert("Farnoosh Hejazi is one of the webdevelopers works at Datis Netwrok, her field is JavaScript."); 
     break;
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Sep 2013
    Posts
    18
    Thanks Padonak, but I'm not interested in using "alert"! popup window is something else ... I don't know if you really got what I meant or not, but thanks for replying

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    i'm not good in english, please explain what you want in details, especially this "...I need the exact code to see if the result is as the same as what I've wanted or not..."
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Sep 2013
    Posts
    18
    OK, but at least you should know what popup window is, popup window is a window similar to "alert" , but with different displaying, that you can use CSS to create a special style window. & in that window you can show whatever kind of information, now make me sure if you've already get what I mean. Thanks

  6. #6
    Join Date
    Sep 2013
    Posts
    18
    aha, for that part I've said "...I need the exact code to see if the result is as the same as what I've wanted or not..." : I meant that if you find out any solution or answer , please rewrite the full code for me

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    something like this?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p{position:relative;width:800px;height:400px;background-color:#060;font-size:36px;alignment-adjust:central;margin-top:10px;vertical-align:central;}
    ul{list-style:none;position:absolute;right:0;top:0px;}
    ul li button{width:100px;margin:5px;padding:30px;}
    #blanket{background-color:#111;opacity:0.65;*background:none;position:absolute;z-index: 9001;top:0px;left:0px;width:100%;}
    #popUpDiv{position:absolute;background-color:#fff;width:400px;height:400px;border:5px solid #000;z-index:9002;padding:40px 20px 20px 20px;display:none;}
    #popUpDiv a{position:absolute;top:10px;right:10px;text-decoration:none;color:Crimson;}
    </style>
    <script>
    var msg_arr=[
    "Farnoosh Hejazi is one of the webdevelopers works at Datis Netwrok, her field is JavaScript.",
    "Hamed is one of the webdevelopers works at Datis Netwrok, his field is everything!.",
    "Shayan is one of the webdevelopers works at Datis Netwrok, his field is HTML & CSS.",
    "Majid is one of the webdevelopers works at Datis Netwrok, his field is Networking."
    ];
    
    function myFunction(v){
    var x=document.getElementById("content"),X=document.getElementById("popUpDiv");
    x.innerHTML=msg_arr[v];
    X.style.display='block';
    X.style.left=(document.body.offsetWidth-x.offsetWidth)/2+'px';
    X.style.top='100px';
    }
    
    window.onload=function(){
    document.getElementById('popUpDiv').firstChild.onclick=function(){this.parentNode.style.display='none';return false;}
    var btns=document.getElementsByClassName('bt');
    for(var i=0;i<btns.length;i++){eval('btns[i].onclick=function(){myFunction('+i+');}');}
    }
    </script>
    </head>
    <body>
    <div id="popUpDiv"><a href="">Close</a><div id="content"></div></div>
    <div align="center">
    <p id="demo">Click each buttons to read the related information!</p>
    </div>
    <ul>
    <li><button type="button" class="bt">Farnoosh</button></li>
    <li><button type="button" class="bt">Hamed</button></li>
    <li><button type="button" class="bt">Shayan </button></li>
    <li><button type="button" class="bt">Majid</button></li>
    </ul>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    Sep 2013
    Posts
    221
    Try out with the below code.

    function popitup(url,windowName) {
    newwindow=window.open(url,windowName,'height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
    }

    windowName must be unique when you open a new window with same url otherwise the same window will be refreshed.

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    but do not underestimate popup blockers
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,150
    Homework questions are set by teachers for a reason, it is not up to you to solicit answers from people who are here to help fellow web developers.

    If you don't do things yourself then you never learn.

    You can pick up plenty of information by simply searching the forum for the answers you need, trial and erro and homework gets done with more self satisfaction.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Sep 2013
    Posts
    18
    Thanks a lot Dear Padonak , it was big Help , Thanks for your answer

  12. #12
    Join Date
    Sep 2013
    Posts
    18
    Yes , Of curse , I know , But I'm novice , indeed I know how to search but actually I need a stronger start to lessen the gap between my self & other members we're working at somewhere so speedy , it's not a method that I used to! however I'll come herein this forum for very often , but thanks for advice (but I didn't ever mean to do my homework guys! just I wanted a quick reply) Thanks every one

  13. #13
    Join Date
    Sep 2013
    Posts
    18
    Thanks priyankagound for your answer , it was really usefull

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles