How to make a pop up in Ajax?

Question

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.

I'm not so familiar with Ajax. would really appreciate it.

Main Page HTML

<p><a onclick="popup();">Check Your Eligibility and Apply for membership.</a></p>

Main Page JS

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

POPUP Window HTML

<body>
    <div class="popup_contact_wrapper">
        <div id="contactWrapper_popup">             
            <div id='container'>
                <div id='title'>
                    <br/>
                    <h2 class="title">Check Eligibility</h1>
                </div>
                <br/>
                <div id='quiz'></div>
                <div class='button' id='next'><a href='#'>Next</a></div>
                <div class='button' id='prev'><a href='#'>Prev</a></div>
                <div class='button' id='start'> <a href='#'>Start Over</a></div>                    
            </div>
        </div>
     </div>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>      
</body>

POP UP Window JSS.

<script>
    (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 = $('<div>', {
              id: 'question'
            });

            var header = $('<h4>Question ' + (index + 1) + ':</h4>');
            qElement.append(header);

            var question = $('<p>').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 = $('<ul>');
            var item;
            var input = '';
            for (var i = 0; i < questions[index].choices.length; i++) {
              item = $('<li>');
              input = '<input type="radio" name="answer" value=' + i + ' />';
              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 < 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 = $('<p>',{id: 'question'});

            var numCorrect = 0;
            for (var i = 0; i < selections.length; i++) {
              if (selections[i] === questions[i].correctAnswer) {
                numCorrect++;
              }
            }
            if (numCorrect==2) {
                score.append('You are Eligible to Apply for the Beneficiary Programme. </br> <a href="application.pdf" target="_blank">Download Application</a>');
                return score;
            }
            else {
                score.append('We are Sorry. You are  Not Eligible to Apply for the Beneficiary Programme.');
                return score;
            }

          }
        })();
</script>

Need to be a lot more specific about what problems you have achieving what you want. Also try to remove all code not directly related to this issue — charlietfl, Jun 25 '16 at 23:31
The examples in [this post](http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) might help. See also [this post](http://stackoverflow.com/a/36025530/1447509) — cssyphus, Jun 25 '16 at 23:31
Not hard to find numerous modal/dialog/popup plugins in a web search either and many support ajax built right in — charlietfl, Jun 25 '16 at 23:33
Also, Ajax *is still* JS, so if you could do it with JS before, I'm not sure what changed. — Paul, Jun 26 '16 at 12:52
the popup window is working perfectly with the javascript. without using windows.open is there a way to call the popup page using ajax?? cos i dont want the address bar to appear. and i read you can only do that using ajax — shav, Jun 26 '16 at 14:20
thanks all for the suggestion. i managed to find an answer. check the code in the next answer. hope it will help you guys too. — shav, Jun 27 '16 at 02:30

shav · Accepted Answer · 2016-06-27T02:28:44.273

hey all i managed to find a solution.. works perfectly... for the above the working code is :

(function($) {
  $(function() {
    $('#my-button').bind('click', function(e) {
      e.preventDefault();
      $('#element_to_pop_up').bPopup({
        contentContainer: '.content',
        loadUrl: 'popup.html',
        position: [10, 10], //x, y
        positionStyle: 'fixed'
      });
    });
  });
})(jQuery);
(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 = $('<div>', {
      id: 'question'
    });

    var header = $('<h4>Question ' + (index + 1) + ':</h4>');
    qElement.append(header);

    var question = $('<p>').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 = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      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 < 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 = $('<p>', {
      id: 'question'
    });

    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
    if (numCorrect == 2) {
      score.append('You are Eligible to Apply for the Beneficiary Programme. </br> <a href="application.pdf" target="_blank">Download Application</a>');
      return score;
    } else {
      score.append('We are Sorry. You are  Not Eligible to Apply for the Beneficiary Programme.');
      return score;
    }

  }
})();



//bpopup.js save as a different file from here 

;(function($) {
 'use strict';
 
    $.fn.bPopup = function(options, callback) {
        
     if ($.isFunction(options)) {
            callback   = options;
            options   = null;
        }

  // OPTIONS
        var o     = $.extend({}, $.fn.bPopup.defaults, options);
  
  // HIDE SCROLLBAR?  
        if (!o.scrollBar)
            $('html').css('overflow', 'hidden');
        
  // VARIABLES 
        var $popup    = this
          , d     = $(document)
          , w     = window
    , $w    = $(w)
          , wH    = windowHeight()
    , wW    = windowWidth()
          , prefix   = '__b-popup'
    , isIOS6X   = (/OS 6(_\d)+/i).test(navigator.userAgent) // Used for a temporary fix for ios6 timer bug when using zoom/scroll 
          , buffer   = 200
    , popups   = 0
          , id
          , inside
          , fixedVPos
          , fixedHPos
          , fixedPosStyle
    , vPos
          , hPos
    , height
    , width
    , debounce
    , autoCloseTO
  ;

  ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // PUBLIC FUNCTION - call it: $(element).bPopup().close();
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        $popup.close = function() {
            close();
        };
  
        $popup.reposition = function(animateSpeed) {
            reposition(animateSpeed);
        };

        return $popup.each(function() {
            if ($(this).data('bPopup')) return; //POPUP already exists?
            init();
        });

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // HELPER FUNCTIONS - PRIVATE
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        function init() {
            triggerCall(o.onOpen);
   popups = ($w.data('bPopup') || 0) + 1, id = prefix + popups + '__',fixedVPos = o.position[1] !== 'auto', fixedHPos = o.position[0] !== 'auto', fixedPosStyle = o.positionStyle === 'fixed', height = $popup.outerHeight(true), width = $popup.outerWidth(true);
            o.loadUrl ? createContent() : open();
        };
  
  function createContent() {
            o.contentContainer = $(o.contentContainer || $popup);
            switch (o.content) {
                case ('iframe'):
     var iframe = $('<iframe class="b-iframe" ' + o.iframeAttr +'></iframe>');
     iframe.appendTo(o.contentContainer);
     height = $popup.outerHeight(true);
     width = $popup.outerWidth(true);
     open();
     iframe.attr('src', o.loadUrl); // setting iframe src after open due IE9 bug
     triggerCall(o.loadCallback);
                    break;
    case ('image'):
     open();
     $('<img />')
      .load(function() {
          triggerCall(o.loadCallback);
       recenter($(this));
         }).attr('src', o.loadUrl).hide().appendTo(o.contentContainer);
     break;
                default:
     open();
     $('<div class="b-ajax-wrapper"></div>')
                     .load(o.loadUrl, o.loadData, function(response, status, xhr) {
          triggerCall(o.loadCallback, status);
       recenter($(this));
      }).hide().appendTo(o.contentContainer);
                    break;
            }
        };

  function open(){
   // MODAL OVERLAY
            if (o.modal) {
                $('<div class="b-modal '+id+'"></div>')
                .css({backgroundColor: o.modalColor, position: 'fixed', top: 0, right:0, bottom:0, left: 0, opacity: 0, zIndex: o.zIndex + popups})
                .appendTo(o.appendTo)
                .fadeTo(o.speed, o.opacity);
            }
   
   // POPUP
   calcPosition();
            $popup
    .data('bPopup', o).data('id',id)
    .css({ 
       'left': o.transition == 'slideIn' || o.transition == 'slideBack' ? (o.transition == 'slideBack' ? d.scrollLeft() + wW : (hPos + width) *-1) : getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle))
     , 'position': o.positionStyle || 'absolute'
     , 'top': o.transition == 'slideDown' || o.transition == 'slideUp' ? (o.transition == 'slideUp' ? d.scrollTop() + wH : vPos + height * -1) : getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle))
     , 'z-index': o.zIndex + popups + 1 
    }).each(function() {
              if(o.appending) {
                  $(this).appendTo(o.appendTo);
              }
          });
   doTransition(true); 
  };
  
        function close() {
            if (o.modal) {
                $('.b-modal.'+$popup.data('id'))
                 .fadeTo(o.speed, 0, function() {
                     $(this).remove();
                 });
            }
   // Clean up
   unbindEvents(); 
   clearTimeout(autoCloseTO);
   // Close trasition
            doTransition();
            
   return false; // Prevent default
        };
  
  function reposition(animateSpeed){
            wH = windowHeight();
        wW = windowWidth();
   inside = insideWindow();
            if(inside.x || inside.y){
    clearTimeout(debounce);
    debounce = setTimeout(function(){
     calcPosition();
     animateSpeed = animateSpeed || o.followSpeed;
     var css = {};
     if(inside.x)
      css.left = o.follow[0] ? getLeftPos(true) : 'auto';
     if(inside.y)
      css.top = o.follow[1] ? getTopPos(true) : 'auto';
     $popup
                        .dequeue()
                        .each(function() {
                            if(fixedPosStyle) {
                             $(this).css({ 'left': hPos, 'top': vPos });
                            }
                            else {
                                $(this).animate(css, animateSpeed, o.followEasing);
                            }
                        });
    }, 50);     
            }
  };
  
  //Eksperimental
  function recenter(content){
   var _width = content.width(), _height = content.height(), css = {};
   o.contentContainer.css({height:_height,width:_width});

   if (_height >= $popup.height()){
    css.height = $popup.height();
   }
   if(_width >= $popup.width()){
    css.width = $popup.width();
   }
   height = $popup.outerHeight(true)
   , width = $popup.outerWidth(true);
    
   calcPosition();
   o.contentContainer.css({height:'auto',width:'auto'});  
   
   css.left = getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle)),
   css.top = getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle));

   $popup
    .animate(
     css
     , 250
     , function() { 
      content.show();
      inside = insideWindow();
     }
    );
  };
  
        function bindEvents() {
            $w.data('bPopup', popups);
   $popup.delegate('.bClose, .' + o.closeClass, 'click.'+id, close); // legacy, still supporting the close class bClose
            
            if (o.modalClose) {
                $('.b-modal.'+id).css('cursor', 'pointer').bind('click', close);
            }
   
   // Temporary disabling scroll/resize events on devices with IOS6+
   // due to a bug where events are dropped after pinch to zoom
            if (!isIOS6X && (o.follow[0] || o.follow[1])) {
               $w.bind('scroll.'+id, function() {
                 if(inside.x || inside.y){
      var css = {};
      if(inside.x)
       css.left =  o.follow[0] ? getLeftPos(!fixedPosStyle) : 'auto';
      if(inside.y)
       css.top = o.follow[1] ? getTopPos(!fixedPosStyle) : 'auto';
                     $popup
                         .dequeue()
                            .animate(css, o.followSpeed, o.followEasing);
      }  
             }).bind('resize.'+id, function() {
              reposition();
                });
            }
            if (o.escClose) {
                d.bind('keydown.'+id, function(e) {
                    if (e.which == 27) {  //escape
                        close();
                    }
                });
            }
        };
  
        function unbindEvents() {
            if (!o.scrollBar) {
                $('html').css('overflow', 'auto');
            }
            $('.b-modal.'+id).unbind('click');
            d.unbind('keydown.'+id);
            $w.unbind('.'+id).data('bPopup', ($w.data('bPopup')-1 > 0) ? $w.data('bPopup')-1 : null);
            $popup.undelegate('.bClose, .' + o.closeClass, 'click.'+id, close).data('bPopup', null);
        };
  
  function doTransition(open) {
   switch (open ? o.transition : o.transitionClose || o.transition) {
      case "slideIn":
        animate({
         left: open ? getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle)) : d.scrollLeft() - (width || $popup.outerWidth(true)) - buffer
        });
          break;
      case "slideBack":
        animate({
         left: open ? getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle)) : d.scrollLeft() + wW + buffer
        });
          break;
      case "slideDown":
        animate({
         top: open ? getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle)) : d.scrollTop() - (height || $popup.outerHeight(true)) - buffer
        });
          break;
       case "slideUp":
     animate({
      top: open ? getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle)) : d.scrollTop() + wH + buffer
     });
            break;
      default:
          //Hardtyping 1 and 0 to ensure opacity 1 and not 0.9999998
       $popup.stop().fadeTo(o.speed, open ? 1 : 0, function(){onCompleteCallback(open);});
   }
   
   function animate(css){
      $popup
     .css({display: 'block',opacity: 1})
     .animate(css, o.speed, o.easing, function(){ onCompleteCallback(open); });
   };
  };
  
  
  function onCompleteCallback(open){
   if(open){
    bindEvents();
             triggerCall(callback);
    if(o.autoClose){
     autoCloseTO = setTimeout(close, o.autoClose);
    }
   } else {
    $popup.hide();
    triggerCall(o.onClose);
    if (o.loadUrl) {
                    o.contentContainer.empty();
     $popup.css({height: 'auto', width: 'auto'});
                }  
   }
  };
  
  function getLeftPos(includeScroll){
   return includeScroll ? hPos + d.scrollLeft() : hPos;
  };
  
  function getTopPos(includeScroll){
   return includeScroll ? vPos + d.scrollTop() : vPos;
  };
  
  function triggerCall(func, arg) {
   $.isFunction(func) && func.call($popup, arg);
  };
  
        function calcPosition(){
   vPos   = fixedVPos ? o.position[1] : Math.max(0, ((wH- $popup.outerHeight(true)) / 2) - o.amsl)
   , hPos   = fixedHPos ? o.position[0] : (wW - $popup.outerWidth(true)) / 2
   , inside  = insideWindow();
  };
  
        function insideWindow(){
            return {  
    x: wW > $popup.outerWidth(true),
    y: wH > $popup.outerHeight(true) 
   }
        };
  
  function windowHeight(){
   return $w.height();
  };
  
  function windowWidth(){
   return $w.width();
  };
    };

 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // DEFAULT VALUES
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    $.fn.bPopup.defaults = {
          amsl:    50
        , appending:   true
        , appendTo:   'body'
  , autoClose:  false
        , closeClass:   'b-close'
        , content:    'ajax' // ajax, iframe or image
        , contentContainer: false
  , easing:    'swing'
        , escClose:   true
        , follow:    [true, true] // x, y
  , followEasing:  'swing'
        , followSpeed:   500
  , iframeAttr:   'scrolling="no" frameborder="0"'
  , loadCallback:  false
  , loadData:   false
        , loadUrl:    false
        , modal:    true
        , modalClose:   true
        , modalColor:   '#000'
        , onClose:    false
        , onOpen:    false
        , opacity:    0.7
        , position:   ['auto', 'auto'] // x, y,
        , positionStyle:  'absolute'// absolute or fixed
        , scrollBar:   true
  , speed:    250 // open & close speed
  , transition:  'fadeIn' //transitions: fadeIn, slideDown, slideIn, slideBack
  , transitionClose: false
        , zIndex:    9997 // popup gets z-index 9999, modal overlay 9998
    };
})(jQuery);

.button {
  border: 4px solid;
  border-radius: 5px;
  width: 40px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: right;
  background-color: #ff795f;
  color: #ff795f;
  margin: 0 2px 0 2px;
}
.button.active {
  background-color: #fba999;
  color: #fba999;
}
button {
  position: relative;
  float: right;
}
.button a {
  text-decoration: none;
  color: black;
}
#container {
  width: 75%;
  margin: auto;
  padding: 0 25px 40px 10px;
  border: 4px solid #fba999;
  background-color: #ffffff;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 5px 5px 5px #888;
}
#prev {
  display: none;
}
#start {
  display: none;
  width: 90px;
}
#element_to_pop_up {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">

  <div id='container'>
    <div id='title'>
      <br/>
      <h2 class="title">Check Eligibility</h2>
    </div>
    <br/>
    <div id='quiz'></div>
    <div class='button' id='next'><a href='#'>Next</a>
    </div>
    <div class='button' id='prev'><a href='#'>Prev</a>
    </div>
    <div class='button' id='start'> <a href='#'>Start Over</a>
    </div>
  </div>

</div>

hope this will help you guys too...

How to make a pop up in Ajax?

1 Answers1