2
我有一个包含三种模式（即弹出窗口）的网页，但只有其中一个正常工作。另外两个在他们身上有一个黑色层，应该在背景中。黑色图层显示模式
我已阅读关于此网站上类似问题的其他线程，但目前为止没有任何帮助。我很困惑。
任何人都可以帮我一点吗？
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
\t
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
\t $('a[data-reveal-id]').live('click', function(e) {
\t \t e.preventDefault();
\t \t var modalLocation = $(this).attr('data-reveal-id');
\t \t $('#'+modalLocation).reveal($(this).data());
\t });
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
\t \t animation: 'fadeAndPop', //fade, fadeAndPop, none
\t \t animationspeed: 300, //how fast animtions are
\t \t closeonbackgroundclick: false, //if you click background will modal close?
\t \t dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
\t };
\t
//Extend dem' options
var options = $.extend({}, defaults, options);
\t
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
\t var modal = $(this),
\t \t topMeasure = parseInt(modal.css('top')),
\t \t \t \t topOffset = modal.height() + topMeasure,
\t \t locked = false,
\t \t \t \t modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
\t \t \t if(modalBG.length == 0) {
\t \t \t \t modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
\t \t \t } \t \t
/*---------------------------
Open & Close Animations
----------------------------*/
\t \t \t //Entrance Animations
\t \t \t modal.bind('reveal:open', function() {
\t \t \t modalBG.unbind('click.modalEvent');
\t \t \t \t $('.' + options.dismissmodalclass).unbind('click.modalEvent');
\t \t \t \t if(!locked) {
\t \t \t \t \t lockModal();
\t \t \t \t \t if(options.animation == "fadeAndPop") {
\t \t \t \t \t \t modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
\t \t \t \t \t \t modalBG.fadeIn(options.animationspeed/2);
\t \t \t \t \t \t modal.delay(options.animationspeed/2).animate({
\t \t \t \t \t \t \t "top": $(document).scrollTop()+topMeasure + 'px',
\t \t \t \t \t \t \t "opacity" : 1
\t \t \t \t \t \t }, options.animationspeed,unlockModal()); \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t if(options.animation == "fade") {
\t \t \t \t \t \t modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
\t \t \t \t \t \t modalBG.fadeIn(options.animationspeed/2);
\t \t \t \t \t \t modal.delay(options.animationspeed/2).animate({
\t \t \t \t \t \t \t "opacity" : 1
\t \t \t \t \t \t }, options.animationspeed,unlockModal()); \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t if(options.animation == "none") {
\t \t \t \t \t \t modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
\t \t \t \t \t \t modalBG.css({"display":"block"}); \t
\t \t \t \t \t \t unlockModal() \t \t \t \t
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t modal.unbind('reveal:open');
\t \t \t }); \t
\t \t \t //Closing Animation
\t \t \t modal.bind('reveal:close', function() {
\t \t \t if(!locked) {
\t \t \t \t \t lockModal();
\t \t \t \t \t if(options.animation == "fadeAndPop") {
\t \t \t \t \t \t modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
\t \t \t \t \t \t modal.animate({
\t \t \t \t \t \t \t "top": $(document).scrollTop()-topOffset + 'px',
\t \t \t \t \t \t \t "opacity" : 0
\t \t \t \t \t \t }, options.animationspeed/2, function() {
\t \t \t \t \t \t \t modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
\t \t \t \t \t \t \t unlockModal();
\t \t \t \t \t \t }); \t \t \t \t \t
\t \t \t \t \t } \t
\t \t \t \t \t if(options.animation == "fade") {
\t \t \t \t \t \t modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
\t \t \t \t \t \t modal.animate({
\t \t \t \t \t \t \t "opacity" : 0
\t \t \t \t \t \t }, options.animationspeed, function() {
\t \t \t \t \t \t \t modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
\t \t \t \t \t \t \t unlockModal();
\t \t \t \t \t \t }); \t \t \t \t \t
\t \t \t \t \t } \t
\t \t \t \t \t if(options.animation == "none") {
\t \t \t \t \t \t modal.css({'visibility' : 'hidden', 'top' : topMeasure});
\t \t \t \t \t \t modalBG.css({'display' : 'none'}); \t
\t \t \t \t \t } \t \t
\t \t \t \t }
\t \t \t \t modal.unbind('reveal:close');
\t \t \t });
\t
/*---------------------------
Open and add Closing Listeners
----------------------------*/
\t //Open Modal Immediately
\t modal.trigger('reveal:open')
\t \t \t
\t \t \t //Close Modal Listeners
\t \t \t var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() {
\t \t \t modal.trigger('reveal:close')
\t \t \t });
\t \t \t
\t \t \t if(options.closeonbackgroundclick) {
\t \t \t \t modalBG.css({"cursor":"pointer"})
\t \t \t \t modalBG.bind('click.modalEvent', function() {
\t \t \t \t modal.trigger('reveal:close')
\t \t \t \t });
\t \t \t }
\t \t \t $('body').keyup(function(e) {
\t \t if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
\t \t \t });
\t \t \t
\t \t \t
/*---------------------------
Animations Locks
----------------------------*/
\t \t \t function unlockModal() {
\t \t \t \t locked = false;
\t \t \t }
\t \t \t function lockModal() {
\t \t \t \t locked = true;
\t \t \t } \t
\t \t \t
});//each call
}//orbit plugin call
})(jQuery);.reveal-modal-bg {
\t text-align:center;
\t position: fixed;
\t height: 100%;
\t width: 100%;
\t background: #000;
\t background: rgba(0,0,0,0.7);
\t z-index: 100;
\t display: none;
\t top: 0;
\t left: 0;
}
\t
.reveal-modal {
\t visibility: hidden;
\t margin-top:9%;
\t left: 31.9%;
\t width: 490px;
\t background: rgba(250,250,250,0.9) url(modal-gloss.png) no-repeat -200px -80px;
\t position: fixed;
\t z-index: 100;
\t padding: 20px 0px 34px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
\t border-radius: 5px;
\t -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
\t -box-shadow: 0 0 10px rgba(0,0,0,.4);
}
\t \t
.col-md-12 send { \t \t
\t font-family: Verdana, Geneva, sans-serif;
\t font-weight: 100;
\t font-style: normal;
\t font-variant: normal; \t \t
}
\t \t \t \t
.reveal-modal h1 { \t
\t text-align: center;
\t font-size: 30px;
\t font-family: Raleway Semi-Bold 600, sans-serif;
\t font-weight: 150;
}
.reveal-modal h5 { \t
\t text-align: center;
\t font-size: 15px;
\t font-family: Raleway Bold, sans-serif;
\t font-weight: 700;
}
.companyowners { \t
\t text-align: center;
\t display: flex;
\t padding-top: 10px;
}
.companyowners > div {
\t flex: 1;
}
\t \t
.reveal-modal.small \t \t { width: 200px; margin-left: -140px;}
.reveal-modal.medium \t { width: 400px; margin-left: -240px;}
.reveal-modal.large \t \t { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge \t { width: 800px; margin-left: -440px;}
\t
.close-reveal-modal {
\t font-size: 22px;
\t line-height: .5;
\t position: absolute;
\t top: 8px;
\t right: 11px;
\t color: #aaa;
\t text-shadow: 0 -1px 1px rbga(0,0,0,.6);
\t font-weight: bold;
\t cursor: pointer;
}<script src="https://code.jquery.com/jquery-1.6.min.js"></script>
<div class="popups">
\t <a href="#" data-reveal-id="myModal" data-animation="fade">LINK1</a>
\t <a href="#" data-reveal-id="myModal2" data-animation="fade">LINK2</a>
\t <a href="#" data-reveal-id="myModal3" data-animation="fade">LINK3</a>
</div>
\t
\t
\t
\t <div class="reveal-modal-bg">
\t \t <div id="myModal" class="reveal-modal">
\t \t <section class="content margin-top-50 section-bg">
\t \t <div class="container about">
\t \t <div class="row margin-bottom-50 margin-top-50">
\t \t <div class="col-md-6 margin-top-50">
\t \t Popup1
\t \t \t \t \t \t
</div>
\t \t </div>
\t \t </div> \t
\t \t <div class="close-reveal-modal">×</div>
\t \t </div>
\t </div>
\t <div class="reveal-modal-bg">
\t \t <div id="myModal2" class="reveal-modal">
\t \t <section class="content margin-top-50 section-bg">
\t \t <div class="container about">
\t \t <div class="row margin-bottom-50 margin-top-50">
\t \t <div class="col-md-6 margin-top-50">
\t \t Popup2
\t \t \t \t \t \t
</div>
\t \t </div>
\t \t </div> \t
\t \t <div class="close-reveal-modal">×</div>
\t \t </div>
\t </div>
\t
\t <div class="reveal-modal-bg">
\t \t <div id="myModal3" class="reveal-modal">
\t \t <section class="content margin-top-50 section-bg">
\t \t <div class="container about">
\t \t <div class="row margin-bottom-50 margin-top-50">
\t \t <div class="col-md-6 margin-top-50">
\t \t Popup3
\t \t \t \t \t \t
</div>
\t \t </div>
\t \t </div> \t
\t \t <div class="close-reveal-modal">×</div>
\t \t </div>
\t </div>
它的工作！万分感谢！ :) – Lavonen
没有probs！你能接受答案并为我投票:) –