jquery多个带调光器的弹出窗口

我有代码，如果你想一个弹出窗口与调光器，但我想它的工作与多个点击弹出窗口。我真的不知道如何返工它做多次，所以一些帮助将不胜感激。我试着找到其他带有调光jquery的弹出窗口，但它们似乎都不适用于多个

//这是关闭弹出窗口的函数
函数endBlackout（）{
$（“.blackout”）.css（“显示”、“无”）；
$（“.msgbox”）.css（“显示”、“无”）；
}
//这是关闭弹出窗口的函数
函数strtlblackout（）{
$（“.msgbox”）.css（“显示”、“块”）；
$（“.blackout”）.css（“显示”、“块”）；
}
//设置在单击时触发断电的按钮
$（文档）.ready（函数（）{
$（“#btn1”）。单击（strtBlackout）；//如果按了btn，则打开
$（“#btn2”）。单击（strtBlackout）；//如果按了btn，则打开
$（“.blackout”）。单击（endBlackout）；//如果在弹出窗口外单击，则关闭
$（“.closeBox”）。单击（endBlackout）；//如果单击了关闭btn，则关闭
});
.blackout{
背景色：#000；
不透明度：.7；
过滤器：α（不透明度=70）；
身高：100%；
宽度：100%；
位置：固定；
排名：0；
左：0；
z指数：301；
显示：无；
光标：指针；
}
.msgbox{
背景色：#ccc；
颜色：#000；
宽度：70%；
身高：60%；
位置：固定；
最高：20%；
左：15%；
边界半径：20px；
填充：10px；
z指数：302；
显示：无；
}
.衣柜{
背景色：#CC0000；
颜色：#FFFFFF；
填充：8px；
浮动：对；
边界半径：3px；
光标：指针；
文本转换：大写；
}

接近
信息就在这里
我的建议是对输入按钮使用
数据属性。这样，除了显示的信息是动态的外，您只有一个黑框

我的代码解释了-

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

然后，我在您的
strtblockout
函数中添加了一个参数，该参数将作为显示的消息

现在的HTML如下所示-

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


//这是关闭弹出窗口的函数
函数endBlackout（）{
$（“.blackout”）.css（“显示”、“无”）；
$（“.msgbox”）.css（“显示”、“无”）；
}
//这是关闭弹出窗口的函数
功能STRTLBlackout（消息）{
$（'.message'）.html（message）；
$（“.msgbox”）.css（“显示”、“块”）；
$（“.blackout”）.css（“显示”、“块”）；
}
$（文档）.on（'click'，'.blackout，.closeBox'，endBlackout）；
$（文档）.on（'click'，'.openBlackout'，函数（）{
strtblockout（$（this.data（'message'））；
});
//设置在单击时触发断电的按钮
/*$（文档）.ready（函数（）{
$（“#btn1”）。单击（strtBlackout）；//如果按了btn，则打开
$（“#btn2”）。单击（strtBlackout）；//如果按了btn，则打开
$（“.blackout”）。单击（endBlackout）；//如果在弹出窗口外单击，则关闭
$（“.closeBox”）。单击（endBlackout）；//如果单击了关闭btn，则关闭
});*/
.blackout{
背景色：#000；
不透明度：.7；
过滤器：α（不透明度=70）；
身高：100%；
宽度：100%；
位置：固定；
排名：0；
左：0；
z指数：301；
显示：无；
光标：指针；
}
.msgbox{
背景色：#ccc；
颜色：#000；
宽度：70%；
身高：60%；
位置：固定；
最高：20%；
左：15%；
边界半径：20px；
填充：10px；
z指数：302；
显示：无；
}
.衣柜{
背景色：#CC0000；
颜色：#FFFFFF；
填充：8px；
浮动：对；
边界半径：3px；
光标：指针；
文本转换：大写；
}

接近
信息就在这里
一种解决方案可能是在每次单击按钮时创建一个新的消息框和新的黑屏元素。因此，最初不存在断电元素或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索引的其他对话框的顶部）。如果尚未使用，请在此处检查：

由于不能单击对话框外的任何位置，因此“下一步”按钮必须在对话框内，因此我当前使用in 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方法相同）

但毕竟，我建议你使用这样一个库，不需要每天都重新发明轮子。（：
//添加类
接近
信息就在这里
//使用类作为选择器
$（“.btn”）。单击（strtBlackout）；

检查小提琴：
问题是什么？请尝试改写以使其更清晰如果我有一个按钮，则此操作有效，但如果我有多个按钮，则不会出现多个弹出按钮
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;
}

<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" />

//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);