javascript html popup window

Question

I am fairly a beginner with javascript. What I want to do is when I click on a button: enter image description here

I want it to popup a window. The content of this window is HTML (actually it's a .php) code. As follows: enter image description here

Then when you click next it scrolls to the next list of movies. What is the easiest javascript/jQuery library to do this?

This snippet of pitcure is taken from the website getglue. I tried to firebug the site, but can't seem to find the js code to do it.

IMPORTANT: The movie title and image is taken from a database, and therefore content is not static html. This is where I actually got confused on how to do a dynamic content generated window popup box

When you say "popup a window", do you mean a new browser window? Or do you mean a lightbox effect? — Hubro
– Hubro, Commented Apr 21, 2011 at 2:35
something like a lightbox effect, the problem is that those movies are pulled from a database and therefore php code is needed... will lightbox effect work? — aherlambang
– aherlambang, Commented Apr 21, 2011 at 2:42

ohmusama · Accepted Answer · 2011-04-21 04:30:33Z

3

This is a fabulous tutorial on popups with jQuery (the only way to code js)

http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

A tutorial for AJAX

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

edited Apr 21, 2011 at 4:30

answered Apr 21, 2011 at 2:31

ohmusama

4,2556 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aherlambang Over a year ago

yes, the content of that window is static HTML.. I want a dynamic one as the movie title is pulled from the database

ohmusama Over a year ago

oh right, I forgot you were a beginner. I'm sorry. You use AJAX. I added a link to help with learning AJAX

ataddeini · Accepted Answer · 2011-04-21 02:30:47Z

3

jQuery UI's one of the most popular tools for things like this. They have a dialog that you can use to achieve this affect.

answered Apr 21, 2011 at 2:30

ataddeini

4,96128 silver badges34 bronze badges

Comments

Delan Azabani · Accepted Answer · 2011-04-21 02:31:15Z

0

Give the button an id with the id attribute, then use this JavaScript code somewhere after the button's place in HTML:

document.getElementById('the_button_id').addEventListener('click', function() {
    window.open('page_to_open', '');
}, false);

answered Apr 21, 2011 at 2:31

Delan Azabani

81.8k30 gold badges174 silver badges215 bronze badges

Comments

Eric T · Accepted Answer · 2011-04-21 03:19:36Z

0

Just like what Matt Ball says on using lightbox / fancybox (to pop up your form). After that if u want the next button to slide to next list, 1st make sure the list of movies portion inside a div with id then use jqueryui event like this:

$("#idofyourcurrentlist").hide("slide", { direction: "left" }, 1000);
$("#idofyournextlist").delay(1000).show("slide",{direction: "right"}, 1000);

Good Luck.

As requested:

var getdata = "something that  u need";
var datatopost = "yourneed=" + getdata;
$.post("tophphandling.php",datatopost,function(success){
    if(success){
       alert("Thank you.");
    }
});

edited Apr 21, 2011 at 3:19

answered Apr 21, 2011 at 2:51

Eric T

1,0264 gold badges20 silver badges42 bronze badges

3 Comments

aherlambang Over a year ago

so in my next button, what js should I put?

Eric T Over a year ago

I can't imagine what's your build maybe your query will select all listed movies ? If it is then limit them for example the 1st page list is 0-10 and 2nd is 11-20 and so on(Calling them using $.post() ) <<==== Ajax Method in Jquery.

aherlambang Over a year ago

mind doing me a code snippet using that $.post? and yes...I limit it from 0-10 etc

NVRM · Accepted Answer · 2022-04-14 18:50:56Z

Pure HTML popup, using the details element.

It should appear centred, and dim the whole page using a large outline.

.popup > p {
    padding: 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 25vw
}
.popup summary {
    padding: 1rem 0.5rem;
    cursor: pointer;
    max-height: 90vh;
    overflow: auto
}
.popup[open] summary {
    background: black;
    color: white;
    padding: 0.5rem;
}

.popup[open] {
    position: fixed;
    /* top: calc(50% - 25vw); */
    left: calc(50% - 15vw);
    outline: 5000px #00000090 solid;
    border: 5px red solid;
    border-radius: 0.5rem;
    z-index: 1;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden
}

.popup[open] summary::after {
    content: '❌';
    float: right;
}

<details class="popup">
  <summary>HTML popup</summary>
    <p>
      <span>Name</span>
      <input value="HTML"/>
      <br>
      <span>Difficulty</span>
      <input type="number" value="3"/>
      <br>
      <span>Coolness</span>
      <input type="number" min="0" max=8 step="1" value="97" />
      <br>
      <p><span>Powered by HTML</span></p>
    </p>
</details>

Powered by HTML.

Collectives™ on Stack Overflow

javascript html popup window

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related