jquery複数のポップアップ（調光器）

Question

1つのポップアップを調光器で表示したい場合はコードがありますが、複数のポップアップを表示する場合はうまく動作します。私は本当にいくつかの助けに感謝されるように複数を行うためにそれを再加工する方法については本当にわからない。私は調光器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（）の呼び出しごとに新しいダイアログのレイアウトを動的に作成することです。 現在、どのダイアログが上にあるかを制御するために、CSS属性z-indexを使用しています。 （他のすべてのダイアログは、より高い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/