jquery multiple pop up with dimmer

Question

У меня есть код, который работает, если вы хотите, чтобы один всплывал с диммером, но я хотел бы, чтобы он работал с несколькими всплывающими окнами. Я не совсем уверен в том, как переделать его, чтобы сделать несколько, поэтому некоторая помощь будет оценена по достоинству. Я пробовал найти другие всплывающие окна с dimmer jquerys, но ни один из них, похоже, не работает для нескольких.

//This is the function that closes the pop-up 
 
function endBlackout(){ 
 
    $(".blackout").css("display", "none"); 
 
    $(".msgbox").css("display", "none"); 
 
} 
 

 
//This is the function that closes the pop-up 
 
function strtBlackout(){ 
 
    $(".msgbox").css("display", "block"); 
 
    $(".blackout").css("display", "block"); 
 
} 
 

 
//Sets the buttons to trigger the blackout on clicks 
 
    $(document).ready(function(){ 
 
    $("#btn1").click(strtBlackout); // open if btn is pressed 
 
    $("#btn2").click(strtBlackout); // open if btn is pressed 
 
    $(".blackout").click(endBlackout); // close if click outside of popup 
 
    $(".closeBox").click(endBlackout); // close if close btn clicked 
 
});

.blackout { 
 
    background-color:#000; 
 
    opacity:.7; 
 
    filter:alpha(opacity=70); 
 
    height:100%; 
 
    width:100%; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    z-index:301; 
 
    display:none; 
 
    cursor:pointer; 
 
} 
 
.msgbox { 
 
    background-color:#ccc; 
 
    color:#000; 
 
    width:70%; 
 
    height:60%; 
 
    position:fixed; 
 
    top:20%; 
 
    left:15%; 
 
    border-radius:20px; 
 
    padding:10px; 
 
    z-index:302; 
 
    display:none; 
 
} 
 
.closeBox { 
 
    background-color:#CC0000; 
 
    color:#FFFFFF; 
 
    padding:8px; 
 
    float:right; 
 
    border-radius:3px; 
 
    cursor:pointer; 
 
    text-transform:uppercase; 
 
}

<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<div class="blackout"></div> 
 
<div class="msgbox"> 
 
    <div class="closeBox">Close</div> 
 
    Message Goes Here 
 
</div> 
 
<input type="button" id="btn1" value="Click Here" />

Answer 1

Мое предложение было бы использовать атрибут data для кнопок ввода. Таким образом, у вас есть только 1 блок затемнения, за исключением информации, отображаемой на дисплее, динамической.

Мой код объяснил -

<input type="button" id="btn1" class="openBlackout" value="Click Here" data-message="Some Message for Click Here Button" /> 

Атрибут кнопки data-message содержит какое-то сообщение, и я дал ему имя класса, так что функция может выполняться всякий раз, когда элемент с таким именем класса щелкает. Это не обязательно должна быть кнопка, вы можете сделать то же самое с изображением.

$(document).on('click', '.openBlackout', function(){ 
    strtBlackout($(this).data('message')); 
}); 

Затем я добавил параметр к вашей strtBlackout функции, которая будет сообщение, которое отображается.

С HTML теперь, глядя, как показано ниже -

<div class="msgbox"> 
    <div class="closeBox">Close</div> 
    <div class="message">Message Goes Here</div> 
</div> 

Я изменил добавил к вашей strtBlackout функции для того, чтобы изменить это сообщение.

function strtBlackout(message){ 
    $('.message').html(message); 
    $(".msgbox").css("display", "block"); 
    $(".blackout").css("display", "block"); 
} 

//This is the function that closes the pop-up 
 
function endBlackout(){ 
 
    $(".blackout").css("display", "none"); 
 
    $(".msgbox").css("display", "none"); 
 
} 
 

 
//This is the function that closes the pop-up 
 
function strtBlackout(message){ 
 
    $('.message').html(message); 
 
    $(".msgbox").css("display", "block"); 
 
    $(".blackout").css("display", "block"); 
 
} 
 

 
$(document).on('click', '.blackout, .closeBox', endBlackout); 
 

 
$(document).on('click', '.openBlackout', function(){ 
 
    strtBlackout($(this).data('message')); 
 
}); 
 

 
//Sets the buttons to trigger the blackout on clicks 
 
/* $(document).ready(function(){ 
 
    $("#btn1").click(strtBlackout); // open if btn is pressed 
 
    $("#btn2").click(strtBlackout); // open if btn is pressed 
 
    $(".blackout").click(endBlackout); // close if click outside of popup 
 
    $(".closeBox").click(endBlackout); // close if close btn clicked 
 
});*/

.blackout { 
 
    background-color:#000; 
 
    opacity:.7; 
 
    filter:alpha(opacity=70); 
 
    height:100%; 
 
    width:100%; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    z-index:301; 
 
    display:none; 
 
    cursor:pointer; 
 
} 
 
.msgbox { 
 
    background-color:#ccc; 
 
    color:#000; 
 
    width:70%; 
 
    height:60%; 
 
    position:fixed; 
 
    top:20%; 
 
    left:15%; 
 
    border-radius:20px; 
 
    padding:10px; 
 
    z-index:302; 
 
    display:none; 
 
} 
 
.closeBox { 
 
    background-color:#CC0000; 
 
    color:#FFFFFF; 
 
    padding:8px; 
 
    float:right; 
 
    border-radius:3px; 
 
    cursor:pointer; 
 
    text-transform:uppercase; 
 
}

<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<div class="blackout"></div> 
 
<div class="msgbox"> 
 
    <div class="closeBox">Close</div> 
 
    <div class="message">Message Goes Here</div> 
 
</div> 
 
<input type="button" id="btn1" class="openBlackout" value="Click Here" data-message="Some Message for Click Here Button" /> 
 
<input type="button" id="btn1" class="openBlackout" value="Click This" data-message="Some Message for Click This Button" />

Answer 2

Одним из решений может быть создание нового окна сообщения и новое затемнение элемента на каждую кнопку. Поэтому вначале не будет ни одного элемента отключения или msgbox.

var lastDialogZIndex = 0; 

function createDialogWrapper(parent) { 
    var dialogWrapper = document.createElement('div'); 
    $(dialogWrapper) 
     .addClass('dialog-wrapper') 
     .css('z-index', lastDialogZIndex) 
     .appendTo(parent); 

    return dialogWrapper; 
} 

function createBlackout(parent) { 
    var blackout = document.createElement('div'); 
    $(blackout) 
     .addClass('blackout') 
     .css('z-index', lastDialogZIndex) 
     .appendTo(parent); 

    return blackout; 
} 

function createMsgBox(parent) { 
    var msgBox = document.createElement('div'); 
    $(msgBox) 
     .addClass('msgbox') 
     .text('Message Goes Here') 
     .css('z-index', lastDialogZIndex) 
     .appendTo(parent); 

    return msgBox; 
} 

function createCloseBox(parent) { 
    var closeBox = document.createElement('div'); 
    $(closeBox) 
     .addClass('closeBox') 
     .text('Close') 
     .css('z-index', lastDialogZIndex) 
     .appendTo(parent); 

    return closeBox; 
} 

function createDialogButton(parent) { 
    var dialogButton = document.createElement('input'); 
    $(dialogButton) 
     .addClass('openBlackout') 
     .attr('value', 'Next dialog button') 
     .attr('type', 'button') 
     .css('z-index', lastDialogZIndex) 
     .appendTo(parent); 

    return dialogButton; 
} 

function buildDialog(parent) { 
    var wrapper = createDialogWrapper(parent); 
    var blackout = createBlackout($(wrapper)); 
    var msgBox = createMsgBox($(wrapper)); 
    var closeBox = createCloseBox($(msgBox)); 
    var nextDialogButton = createDialogButton($(wrapper)); 

    lastDialogZIndex = lastDialogZIndex + 1; 
} 

//dynamically create new dialog 
function startBlackout() { 
    var mainWrapper = $('#main-dialog-wrapper'); 
    buildDialog(mainWrapper); 
} 

// Remove the wrapper for the last dialog 
function endBlackout() { 
    $("#main-dialog-wrapper:last-child").remove(); 
    lastDialogZIndex = lastDialogZIndex - 1; 
} 

Что происходит выше: вы создаете макет для нового диалога динамически при каждом вызове для startBlackout(). В настоящее время я использую z-index атрибута css, чтобы контролировать, какой диалог находится сверху. (каждый другой диалог отображается поверх другого с более высоким z-индексом). Если вы его не использовали, проверьте его здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Поскольку вы не можете щелкнуть нигде вне диалогового окна, следующая кнопка должна быть внутри него, поэтому я в настоящее время динамически создаю ее в startBlackout(), только для пример.

Таким образом, с этой функциональностью, то HTML будет выглядеть следующим образом:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<div id="main-dialog-wrapper"> </div> 
<input type="button" id="btn1" class="openBlackout" value="Open dialog 1" /> 

И вы используете другие функции так же, как и раньше (методы OnClick одинаковы).

Но в конце концов, я бы предложил использовать библиотеку типа http://jquerymodal.com/, не нужно изобретать велосипед каждый день.(:

Answer 3

//add class 
<div class="blackout"></div> 
<div class="msgbox"> 
    <div class="closeBox">Close</div> 
    Message Goes Here 
</div> 
<input type="button" id="btn1" class="btn" value="Click Here" /> 

//use class as selector 
$(".btn").click(strtBlackout); 

проверка скрипку: https://jsfiddle.net/giantomakin/yg7ckfpd/1/