javascript html popup window

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

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

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 开发者_StackOverflow社区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

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/

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.

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);

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.");
    }
});

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.