Wie man in Ajax erscheint?

-2

Ich habe ein Popup-Fenster, das HTML/JS/CSS verwendet. Würde mir jemand bitte helfen, das selbe mit Ajax zu machen, da ich die Adressleiste im Popup verstecken muss aber es scheint, wenn ich Ajax nicht benutze ist es nicht möglich.Wie man in Ajax erscheint?

Ich bin nicht so vertraut mit Ajax. würde es wirklich zu schätzen wissen.

Startseite HTML

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

Hauptseite 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-Fenster 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 Fenster 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>

Quelle

2016-06-25 shav

Sie müssen viel genauer darüber sein, welche Probleme Sie haben, was Sie erreichen wollen. Versuchen Sie auch, den gesamten Code zu entfernen, der nicht direkt mit diesem Problem zusammenhängt – charlietfl

Die Beispiele in [diesem Beitrag] (http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) könnten helfen. Siehe auch [this post] (http://stackoverflow.com/a/36025530/1447509) – gibberish

Nicht schwer zu finden zahlreiche modal/dialog/popup plugins in einer Web-Suche entweder und viele Unterstützung ajax gebaut in – charlietfl

hey alle i .. eine Lösung finden verwaltet funktionieren perfekt ... für die über dem Arbeitscode lautet:

(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($) { 
 
\t 'use strict'; 
 
\t 
 
    $.fn.bPopup = function(options, callback) { 
 
     
 
    \t if ($.isFunction(options)) { 
 
      callback \t \t = options; 
 
      options \t \t = null; 
 
     } 
 

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

 
\t \t //////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 
     // PUBLIC FUNCTION - call it: $(element).bPopup().close(); 
 
\t \t //////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 
     $popup.close = function() { 
 
      close(); 
 
     }; 
 
\t \t 
 
     $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); 
 
\t \t \t 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(); 
 
     }; 
 
\t \t 
 
\t \t function createContent() { 
 
      o.contentContainer = $(o.contentContainer || $popup); 
 
      switch (o.content) { 
 
       case ('iframe'): 
 
\t \t \t \t \t var iframe = $('<iframe class="b-iframe" ' + o.iframeAttr +'></iframe>'); 
 
\t \t \t \t \t iframe.appendTo(o.contentContainer); 
 
\t \t \t \t \t height = $popup.outerHeight(true); 
 
\t \t \t \t \t width = $popup.outerWidth(true); 
 
\t \t \t \t \t open(); 
 
\t \t \t \t \t iframe.attr('src', o.loadUrl); // setting iframe src after open due IE9 bug 
 
\t \t \t \t \t triggerCall(o.loadCallback); 
 
        break; 
 
\t \t \t \t case ('image'): 
 
\t \t \t \t \t open(); 
 
\t \t \t \t \t $('<img />') 
 
\t \t \t \t \t \t .load(function() { 
 
\t \t \t \t \t \t  triggerCall(o.loadCallback); 
 
\t \t \t \t \t \t \t recenter($(this)); 
 
\t \t \t \t \t  }).attr('src', o.loadUrl).hide().appendTo(o.contentContainer); 
 
\t \t \t \t \t break; 
 
       default: 
 
\t \t \t \t \t open(); 
 
\t \t \t \t \t $('<div class="b-ajax-wrapper"></div>') 
 
        \t .load(o.loadUrl, o.loadData, function(response, status, xhr) { 
 
\t \t \t \t \t \t  triggerCall(o.loadCallback, status); 
 
\t \t \t \t \t \t \t recenter($(this)); 
 
\t \t \t \t \t \t }).hide().appendTo(o.contentContainer); 
 
        break; 
 
      } 
 
     }; 
 

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

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

 
\t \t \t $popup 
 
\t \t \t \t .animate(
 
\t \t \t \t \t css 
 
\t \t \t \t \t , 250 
 
\t \t \t \t \t , function() { 
 
\t \t \t \t \t \t content.show(); 
 
\t \t \t \t \t \t inside = insideWindow(); 
 
\t \t \t \t \t } 
 
\t \t \t \t); 
 
\t \t }; 
 
\t \t 
 
     function bindEvents() { 
 
      $w.data('bPopup', popups); 
 
\t \t \t $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); 
 
      } 
 
\t \t \t 
 
\t \t \t // Temporary disabling scroll/resize events on devices with IOS6+ 
 
\t \t \t // 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() { 
 
       \t if(inside.x || inside.y){ 
 
\t \t \t \t \t \t var css = {}; 
 
\t \t \t \t \t \t if(inside.x) 
 
\t \t \t \t \t \t \t css.left = o.follow[0] ? getLeftPos(!fixedPosStyle) : 'auto'; 
 
\t \t \t \t \t \t if(inside.y) 
 
\t \t \t \t \t \t \t css.top = o.follow[1] ? getTopPos(!fixedPosStyle) : 'auto'; 
 
        \t $popup 
 
         \t .dequeue() 
 
          .animate(css, o.followSpeed, o.followEasing); 
 
\t \t \t \t \t } 
 
      \t }).bind('resize.'+id, function() { 
 
\t \t    reposition(); 
 
       }); 
 
      } 
 
      if (o.escClose) { 
 
       d.bind('keydown.'+id, function(e) { 
 
        if (e.which == 27) { //escape 
 
         close(); 
 
        } 
 
       }); 
 
      } 
 
     }; 
 
\t \t 
 
     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); 
 
     }; 
 
\t \t 
 
\t \t function doTransition(open) { 
 
\t \t \t switch (open ? o.transition : o.transitionClose || o.transition) { 
 
\t \t \t case "slideIn": 
 
\t \t \t \t  \t animate({ 
 
\t \t \t \t  \t \t left: open ? getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle)) : d.scrollLeft() - (width || $popup.outerWidth(true)) - buffer 
 
\t \t \t \t  \t }); 
 
\t \t \t  \t break; 
 
\t \t \t case "slideBack": 
 
\t \t \t \t  \t animate({ 
 
\t \t \t \t  \t \t left: open ? getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle)) : d.scrollLeft() + wW + buffer 
 
\t \t \t \t  \t }); 
 
\t \t \t  \t break; 
 
\t \t \t case "slideDown": 
 
\t \t \t \t  \t animate({ 
 
\t \t \t \t  \t \t top: open ? getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle)) : d.scrollTop() - (height || $popup.outerHeight(true)) - buffer 
 
\t \t \t \t  \t }); 
 
\t \t \t  \t break; 
 
\t \t  \t \t case "slideUp": 
 
\t \t \t \t \t animate({ 
 
\t \t \t \t \t \t top: open ? getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle)) : d.scrollTop() + wH + buffer 
 
\t \t \t \t \t }); 
 
\t \t  \t \t break; 
 
\t \t \t default: 
 
\t \t \t  \t \t //Hardtyping 1 and 0 to ensure opacity 1 and not 0.9999998 
 
\t \t \t \t \t $popup.stop().fadeTo(o.speed, open ? 1 : 0, function(){onCompleteCallback(open);}); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function animate(css){ 
 
\t \t \t \t $popup 
 
\t \t \t \t \t .css({display: 'block',opacity: 1}) 
 
\t \t \t \t \t .animate(css, o.speed, o.easing, function(){ onCompleteCallback(open); }); 
 
\t \t \t }; 
 
\t \t }; 
 
\t \t 
 
\t \t 
 
\t \t function onCompleteCallback(open){ 
 
\t \t \t if(open){ 
 
\t \t \t \t bindEvents(); 
 
\t    triggerCall(callback); 
 
\t \t \t \t if(o.autoClose){ 
 
\t \t \t \t \t autoCloseTO = setTimeout(close, o.autoClose); 
 
\t \t \t \t } 
 
\t \t \t } else { 
 
\t \t \t \t $popup.hide(); 
 
\t \t \t \t triggerCall(o.onClose); 
 
\t \t \t \t if (o.loadUrl) { 
 
        o.contentContainer.empty(); 
 
\t \t \t \t \t $popup.css({height: 'auto', width: 'auto'}); 
 
       } \t \t 
 
\t \t \t } 
 
\t \t }; 
 
\t \t 
 
\t \t function getLeftPos(includeScroll){ 
 
\t \t \t return includeScroll ? hPos + d.scrollLeft() : hPos; 
 
\t \t }; 
 
\t \t 
 
\t \t function getTopPos(includeScroll){ 
 
\t \t \t return includeScroll ? vPos + d.scrollTop() : vPos; 
 
\t \t }; 
 
\t \t 
 
\t \t function triggerCall(func, arg) { 
 
\t \t \t $.isFunction(func) && func.call($popup, arg); 
 
\t \t }; 
 
\t \t 
 
     \t function calcPosition(){ 
 
\t \t \t vPos \t \t = fixedVPos ? o.position[1] : Math.max(0, ((wH- $popup.outerHeight(true))/2) - o.amsl) 
 
\t \t \t , hPos \t \t = fixedHPos ? o.position[0] : (wW - $popup.outerWidth(true))/2 
 
\t \t \t , inside \t = insideWindow(); 
 
\t \t }; 
 
\t \t 
 
     function insideWindow(){ 
 
      return { 
 
\t \t \t \t x: wW > $popup.outerWidth(true), 
 
\t \t \t \t y: wH > $popup.outerHeight(true) \t 
 
\t \t \t } 
 
     }; 
 
\t \t 
 
\t \t function windowHeight(){ 
 
\t \t \t return $w.height(); 
 
\t \t }; 
 
\t \t 
 
\t \t function windowWidth(){ 
 
\t \t \t return $w.width(); 
 
\t \t }; 
 
    }; 
 

 
\t //////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 
\t // DEFAULT VALUES 
 
\t //////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 
    $.fn.bPopup.defaults = { 
 
      amsl: \t \t \t 50 
 
     , appending: \t \t true 
 
     , appendTo: \t \t 'body' 
 
\t \t , autoClose: \t \t false 
 
     , closeClass: \t \t 'b-close' 
 
     , content: \t \t \t 'ajax' // ajax, iframe or image 
 
     , contentContainer: false 
 
\t \t , easing: \t \t \t 'swing' 
 
     , escClose: \t \t true 
 
     , follow: \t \t \t [true, true] // x, y 
 
\t \t , followEasing: \t 'swing' 
 
     , followSpeed: \t \t 500 
 
\t \t , iframeAttr: \t \t 'scrolling="no" frameborder="0"' 
 
\t \t , loadCallback: \t false 
 
\t \t , loadData: \t \t false 
 
     , loadUrl: \t \t \t false 
 
     , modal: \t \t \t true 
 
     , modalClose: \t \t true 
 
     , modalColor: \t \t '#000' 
 
     , onClose: \t \t \t false 
 
     , onOpen: \t \t \t false 
 
     , opacity: \t \t \t 0.7 
 
     , position: \t \t ['auto', 'auto'] // x, y, 
 
     , positionStyle: \t 'absolute'// absolute or fixed 
 
     , scrollBar: \t \t true 
 
\t \t , speed: \t \t \t 250 // open & close speed 
 
\t \t , transition: \t \t 'fadeIn' //transitions: fadeIn, slideDown, slideIn, slideBack 
 
\t \t , transitionClose: \t false 
 
     , zIndex: \t \t \t 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>

hoffen, dass diese ihnen helfen ...

Quelle

2016-06-27 02:23:37 shav

Wie man in Ajax erscheint?

Antwort

Verwandte Themen