Как закрыть кнопку прокрутки вниз со страницей?

Question

Итак, у меня есть всплывающее окно, и на этом всплывающем окне у меня есть кнопка X для закрытия. Код для этого в HTML: <a class="close-reveal-modal">&#215;</a> и в JS `

(function($) { 

/*--------------------------- 
Defaults for Reveal 
----------------------------*/ 

    /*--------------------------- 
Listener for data-reveal-id attributes   
----------------------------*/ 

$('a[data-reveal-id]').live('click', function(e) { 
    e.preventDefault(); 
    var modalLocation = $(this).attr('data-reveal-id'); 
    $('#'+modalLocation).reveal($(this).data()); 
}); 

/*--------------------------- 
Extend and Execute 
---------------------------*/ 

$.fn.reveal = function(options) { 


    var defaults = { 
     animation: 'fadeAndPop', //fade, fadeAndPop, none 
     animationspeed: 300, //how fast animtions are 
     closeonbackgroundclick: true, //if you click background will modal close? 
     dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal 
    }; 

    //Extend dem' options 
    var options = $.extend({}, defaults, options); 

    return this.each(function() { 

    /*--------------------------- 
    Global Variables 
    ---------------------------*/ 
     var modal = $(this), 
      topMeasure = parseInt(modal.css('top')), 
      topOffset = modal.height() + topMeasure, 
      locked = false, 
      modalBG = $('.reveal-modal-bg'); 

    /*--------------------------- 
    Create Modal BG 
    ----------------------------*/ 
     if(modalBG.length == 0) { 
      modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal); 
     }   

    /*--------------------------- 
    Open & Close Animations 
    ----------------------------*/ 
     //Entrance Animations 
     modal.bind('reveal:open', function() { 
      modalBG.unbind('click.modalEvent'); 
      $('.' + options.dismissmodalclass).unbind('click.modalEvent'); 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'}); 
        modalBG.fadeIn(options.animationspeed/2); 
        modal.delay(options.animationspeed/2).animate({ 
         "top": $(document).scrollTop()+topMeasure + 'px', 
         "opacity" : 1 
        }, options.animationspeed,unlockModal());     
       } 
       if(options.animation == "fade") { 
        modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure}); 
        modalBG.fadeIn(options.animationspeed/2); 
        modal.delay(options.animationspeed/2).animate({ 
         "opacity" : 1 
        }, options.animationspeed,unlockModal());     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure}); 
        modalBG.css({"display":"block"}); 
        unlockModal()    
       } 
      } 
      modal.unbind('reveal:open'); 
     });  

     //Closing Animation 
     modal.bind('reveal:close', function() { 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "top": $(document).scrollTop()-topOffset + 'px', 
         "opacity" : 0 
        }, options.animationspeed/2, function() { 
         modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "fade") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "opacity" : 0 
        }, options.animationspeed, function() { 
         modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'hidden', 'top' : topMeasure}); 
        modalBG.css({'display' : 'none'}); 
       }  
      } 
      modal.unbind('reveal:close'); 
     });  

/*--------------------------- 
    Open and add Closing Listeners 
    ----------------------------*/ 
     //Open Modal Immediately 
    modal.trigger('reveal:open') 

     //Close Modal Listeners 
     var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() { 
      modal.trigger('reveal:close') 
     }); 

     if(options.closeonbackgroundclick) { 
      modalBG.css({"cursor":"pointer"}) 
      modalBG.bind('click.modalEvent', function() { 
       modal.trigger('reveal:close') 
      }); 
     } 
     $('body').keyup(function(e) { 
      if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key 
     }); 


/*--------------------------- 
Animations Locks 
    ----------------------------*/ 
     function unlockModal() { 
      locked = false; 
     } 
     function lockModal() { 
      locked = true; 
     } 

    });//each call 
}//orbit plugin call 
    })(jQuery); 

`

Прямо сейчас X днище расположена сверху на все время. Как я могу изменить сценарий, чтобы кнопка закрытия прокручивалась вниз со страницы? Мне нужна помощь, потому что у меня очень мало знаний javascript. И есть ли способ изменить, чтобы всплывающее окно всегда начиналось с самого начала после его закрытия и повторного открытия, а не из содержимого, которое вы читаете, после его закрытия?

Edit1: CSS:

/* -------------------------------------------------- 
Reveal Modals 
-------------------------------------------------- */ 

     .reveal-modal-bg { 
     position: fixed; 
    height: 100%; 
    width: 100%; 
    background: #000; 
    background: rgba(0,0,0,.8); 
    z-index: 100; 
    display: none; 
    top: 0; 
    left: 0; 
    font-family: arial; 
    font-weight: bold; 
    } 

.reveal-modal { 
    visibility: hidden; 
    top: 100px; 
    left: 50%; 
    margin-left: -300px; 
    width: 520px; 
    height: 450px; 
    background: #eee url(modal-gloss.png) no-repeat -200px -80px; 
    position: absolute; 
    z-index: 101; 
    padding: 30px 40px 34px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -box-shadow: 0 0 10px rgba(0,0,0,.4); 
    overflow:scroll; 
    overflow-x:hidden; 
    overflow-y:auto; 
    font-family: arial; 
    font-size: 12px; 
    line-height: 150%; 
    } 

    .reveal-modal h1{ 
     color: green; 
     font-size: 40px; 
     font-family: arial; 
    } 

    .reveal-modal strong{ 
     font-style: inherit; 
      font-family: arial; 
    } 


.reveal-modal.small   { width: 200px; margin-left: -140px;} 
.reveal-modal.medium  { width: 400px; margin-left: -240px;} 
.reveal-modal.large   { width: 600px; margin-left: -340px;} 
.reveal-modal.xlarge  { width: 800px; margin-left: -440px;} 

.reveal-modal .close-reveal-modal { 
    font-size: 22px; 
    line-height: .5; 
    position: absolute; 
    top: 8px; 
    right: 11px; 
    color: #aaa; 
    text-shadow: 0 -1px 1px rbga(0,0,0,.6); 
    font-weight: bold; 
    cursor: pointer; 
    font-family: arial; 

    } 

Answer 1

Это сделает работу.

.close-reveal-modal { 
    position: fixed; 
}