I have a question about JavaScript layer pop-up.

Different layer pop-ups were applied to different divisions No matter which div you press, only one layer pop-up appears.

The basic framework for creating layer pop-ups is like this.

function wrapWindowByMask(){ var maskHeight = $(document).height(); var maskWidth = $(window).width();

    $('#mask01').css({'width':maskWidth,'height':maskHeight});


    $('#mask01').fadeTo("fast",0.8);


    var left = ( $(window).scrollLeft() + ( $(window).width() - $('#window01').width()) / 2 );
    var top = ( $(window).scrollTop() + ( $(window).height() - $('#window01').height()) / 2 );

    $('#window01').css({'left':left,'top':top, 'position':'absolute'});

    $('#window01').show();$("body").css("overflow","hidden");$("#window01").css("overflow","auto");$('#artwork01').css({'width':1400,'height':auto});
    $("#artwork01").css("overflow","auto");$('#info').css({'float':right});




}


$(document).ready(function(){
    $('#work001').click(function(e){
        e.preventDefault();
        wrapWindowByMask();
    });




    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask01, #window01').hide(); $("body").css("overflow","auto");
    });


    $('#mask01').click(function () {
        $(this).hide();
        $('#mask01, #window01').hide(); $("body").css("overflow","auto");
    });
});

I copied 6 of these codes and modified the contents differently There's only one version of the pop-up that loads no matter what you click on div... What's the problem? (Crying)

javascript popup layer-popup

2022-09-22 19:12

1 Answers

// This code has never been tested. I don't know what "info" is, so I ignore it.
// Skip modal closing routine
var openModal = function (title, bodyHTML) {

  // First, fill the modal with the contents and make it horizontal and vertically
  if (typeof title == 'undefined' || typeof bodyHTML == 'undefined') return false;
  $('#modal #title').text(title);
  $('#modal #body').html(bodyHTML);

  // Leave mask open mask
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $("body").css("overflow","hidden");
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  }).fadeTo("fast", 0.8);

  // Float the modal because it has an appropriate length and width
  // todo: Process when the width/vertical of the modal (pop-up) is larger than the width/vertical of the window. Side effects such as invisible because the close button is covered.
  var modalLeft = ($(window).scrollLeft() + ($(window).width() - $('#modal').width()) / 2);
  var modalTop = ($(window).scrollTop() + ($(window).height() - $('#modal').height()) / 2);
  $('#modal').css({
    'left': modalLeft,
    'top': modalTop,
    'overflow': 'auto'
  }).show();
}

// Now with this block, #work001.work, #work002.work... Can handle etc
$('.work').each(function(){
  $(this).click(function(){
    var title = $(this).find('.hidden .title').text();
    var body = $(this).find('.hidden .body').html();
    openModal(title, body);
  });
});

2022-09-22 19:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656