title: How to make a pop up in Ajax?
body: <p>I have a popup window that done using HTML/JS/CSS. Would someone please help me to make the same with Ajax, as I need to hide the address bar in the popup but it seems unless I use Ajax its not possible.</p>
  
  <p>I'm not so familiar with Ajax. would really appreciate it. </p>
  
  <p>Main Page HTML  </p>
  
  <pre><code>&lt;p&gt;&lt;a onclick="popup();"&gt;Check Your Eligibility and Apply for membership.&lt;/a&gt;&lt;/p&gt;       
  </code></pre>
  
  <p>Main Page JS</p>
  
  <pre><code>&lt;script&gt;        
      function popup() {
          window.open("popup.html", "child", "toolbar=no,scrollbars=no,resizable=yes,top=200,left=400,width=400,height=275,location=no, title=no");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>POPUP Window HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="popup_contact_wrapper"&gt;
          &lt;div id="contactWrapper_popup"&gt;             
              &lt;div id='container'&gt;
                  &lt;div id='title'&gt;
                      &lt;br/&gt;
                      &lt;h2 class="title"&gt;Check Eligibility&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;br/&gt;
                  &lt;div id='quiz'&gt;&lt;/div&gt;
                  &lt;div class='button' id='next'&gt;&lt;a href='#'&gt;Next&lt;/a&gt;&lt;/div&gt;
                  &lt;div class='button' id='prev'&gt;&lt;a href='#'&gt;Prev&lt;/a&gt;&lt;/div&gt;
                  &lt;div class='button' id='start'&gt; &lt;a href='#'&gt;Start Over&lt;/a&gt;&lt;/div&gt;                    
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
      &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'&gt;&lt;/script&gt;      
  &lt;/body&gt;
  </code></pre>
  
  <p>POP UP Window JSS. </p>
  
  <pre><code>&lt;script&gt;
      (function() {
            var questions = [{
              question: "Is your age between 18 and 70 years (inclusive both)?",
              choices: ["Yes","No"],
              correctAnswer:0
            }, {
              question: "Are you a Resident of Kandy / NE/ Matale/ Kegalle/ Ratnapura / Kurunagala Districts?  ",
              choices: ["Yes","No"],
              correctAnswer:0
            }];
  
            var questionCounter = 0; //Tracks question number
            var selections = []; //Array containing user choices
            var quiz = $('#quiz'); //Quiz div object
  
            // Display initial question
            displayNext();
  
            // Click handler for the 'next' button
            $('#next').on('click', function (e) {
              e.preventDefault()
  
              // Suspend click listener during fade animation
              if(quiz.is(':animated')) {        
                return false;
              }
              choose();
  
              // If no user selection, progress is stopped
              if (isNaN(selections[questionCounter])) {
                alert('Please make a selection!');
              } else {
                questionCounter++;
                displayNext();
              }
            });
  
            // Click handler for the 'prev' button
            $('#prev').on('click', function (e) {
              e.preventDefault();
  
              if(quiz.is(':animated')) {
                return false;
              }
              choose();
              questionCounter--;
              displayNext();
            });
  
            // Click handler for the 'Start Over' button
            $('#start').on('click', function (e) {
              e.preventDefault();
  
              if(quiz.is(':animated')) {
                return false;
              }
              questionCounter = 0;
              selections = [];
              displayNext();
              $('#start').hide();
            });
  
            // Animates buttons on hover
            $('.button').on('mouseenter', function () {
              $(this).addClass('active');
            });
            $('.button').on('mouseleave', function () {
              $(this).removeClass('active');
            });
  
            // Creates and returns the div that contains the questions and 
            // the answer selections
            function createQuestionElement(index) {
              var qElement = $('&lt;div&gt;', {
                id: 'question'
              });
  
              var header = $('&lt;h4&gt;Question ' + (index + 1) + ':&lt;/h4&gt;');
              qElement.append(header);
  
              var question = $('&lt;p&gt;').append(questions[index].question);
              qElement.append(question);
  
              var radioButtons = createRadios(index);
              qElement.append(radioButtons);
  
              return qElement;
            }
  
            // Creates a list of the answer choices as radio inputs
            function createRadios(index) {
              var radioList = $('&lt;ul&gt;');
              var item;
              var input = '';
              for (var i = 0; i &lt; questions[index].choices.length; i++) {
                item = $('&lt;li&gt;');
                input = '&lt;input type="radio" name="answer" value=' + i + ' /&gt;';
                input += questions[index].choices[i];
                item.append(input);
                radioList.append(item);
              }
              return radioList;
            }
  
            // Reads the user selection and pushes the value to an array
            function choose() {
              selections[questionCounter] = +$('input[name="answer"]:checked').val();
            }
  
            // Displays next requested element
            function displayNext() {
              quiz.fadeOut(function() {
                $('#question').remove();
  
                if(questionCounter &lt; questions.length){
                  var nextQuestion = createQuestionElement(questionCounter);
                  quiz.append(nextQuestion).fadeIn();
                  if (!(isNaN(selections[questionCounter]))) {
                    $('input[value='+selections[questionCounter]+']').prop('checked', true);
                  }
  
                  // Controls display of 'prev' button
                  if(questionCounter === 1){
                    $('#prev').show();
                  } else if(questionCounter === 0){
  
                    $('#prev').hide();
                    $('#next').show();
                  }
                }else {
                  var scoreElem = displayScore();
                  quiz.append(scoreElem).fadeIn();
                  $('#next').hide();
                  $('#prev').hide();
                  $('#start').show();
                }
              });
            }
  
            // Computes score and returns a paragraph element to be displayed
            function displayScore() {
              var score = $('&lt;p&gt;',{id: 'question'});
  
              var numCorrect = 0;
              for (var i = 0; i &lt; selections.length; i++) {
                if (selections[i] === questions[i].correctAnswer) {
                  numCorrect++;
                }
              }
              if (numCorrect==2) {
                  score.append('You are Eligible to Apply for the Beneficiary Programme. &lt;/br&gt; &lt;a href="application.pdf" target="_blank"&gt;Download Application&lt;/a&gt;');
                  return score;
              }
              else {
                  score.append('We are Sorry. You are  Not Eligible to Apply for the Beneficiary Programme.');
                  return score;
              }
  
            }
          })();
  &lt;/script&gt;
  </code></pre>