Question

我有一些代码，如果你想要一个带有调光器的弹出窗口，但是我希望它可以在点击弹出窗口中使用多个。我不确定如何重做它来做多个，所以一些帮助将不胜感激。我已经尝试过用调光器jquerys找到其他弹出窗口但是它们似乎都不适用于多个。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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-index）。如果您还没有使用它，请在此处查看：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/

jquery多次弹出调光器

3 个答案: