你如何根据按下的按钮调出不同的对话框

Question

我正在开始一个项目，我预计需要很多很多 dialogs/modals。

我想出了一些非常基本的代码，基本上只是在按下按钮时显示对话框，然后在按下取消按钮时隐藏它。

我现在遇到的唯一问题是我可以继续使用此方法，尽管这意味着用每个对话框的 ID 一遍又一遍地复制相同的代码。

有没有办法让一段脚本可能采用 href 值？或者我可以通过某种方式在 a 标签上放置一个 ID，这将弹出具有相同 ID 的相关弹出窗口？

或者更清洁、更有效的方法？

这是我使用的代码：

HTML:

<a id="create">New</a>

<a id="edit">Edit</a>



<div class="overlay"></div>


<div class="dialog" id="create-new-dialog">
    <header>
        <h1>Create New</h1>
    </header>

    <div class="dialog-content">
        <p>I am some content info</p>
    </div>

    <footer>
        <div class="inner-container">
            <p></p>
            <a id="exit" class="btn-dark-outline dialog-btn cancel">Cancel</a>
        </div>
    </footer>
</div>


<div class="dialog" id="edit-dialog">
    <header>
        <h1>Edit</h1>
    </header>

    <div class="dialog-content">
        <p>I am some content info</p>
    </div>

    <footer>
        <div class="inner-container">
            <p></p>
            <a id="exit" class="btn-dark-outline dialog-btn cancel">Cancel</a>

        </div>
    </footer>
</div>

CSS:

a {
    background:lightpink;
    padding:20px;
    cursor:pointer;
}

.overlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:black;
    display:none;
    opacity:0.5;
}
.dialog {
    background:green;
    position:fixed;
    width:50%;
    margin-left:25%;
    border:1px solid #000000;
    z-index:999999;
    display:none;
    top:25%;
}
.dialog header {
    min-height:50px;
    background-color:#e9e9e9;
    text-align:center;
    border-bottom:1px solid #c4c4c4;
}
.dialog header h1 {
    margin:0;
    font-weight:300;
    font-size:22px;
    padding-top:10px;
}
.dialog .dialog-content {
    background-color:#f7f7f7;
    min-height:200px;
    padding:20px;
    margin:0;
}
.dialog footer {
    position:absolute;
    bottom:0;
    background-color:#ececec;
    width:100%;
    border-top:1px solid #acacac;
}
.dialog footer .inner-container {
    padding:10px;
    text-align:right;
}
.dialog footer .inner-container p {
    float:left;
    width:300px;
    text-align:left;
    margin:0;
}
footer .dialog-btn {
    background:#ffffff !important;
    color:#000000 !important;
    padding:13px;
    display:inline-block;
}

脚本：

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});


$("#create").click(function(){
   $('#create-new-dialog').stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

$("#edit").click(function(){
   $('#edit-dialog').stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

这是我一直在研究的例子： https://jsfiddle.net/susannalarsen/28t6t51x/

Answer 1

您可以获取点击的元素 ID 并附加对话框

$("a:not(#exit)").click(function(){
    var butId=$(this).attr('id');
    var modType=butId+"-dialog";
   $('#'+modType).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

您必须将 create 标签的 id 更改为 create-new，参见 https://jsfiddle.net/depperm/1e2qxu2b/

Answer 2

没问题——您可以创建一个带有 id (fiddle) 的辅助函数：

function showDialog(dialogId){
   $('#' + dialogId).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
}

$("#create").click(function(){
   showDialog('create-new-dialog');
});

$("#edit").click(function(){
   showDialog('edit-dialog');
});

或者，通过类似的机制，使用一个对话框并让点击处理程序更改里面的文本（fiddle):

function showDialog(text){
   $('#content p').text(text);
   $('#my-dialog').stop().fadeIn(300);
   $('.overlay').fadeIn(300);
}

$("#create").click(function(){
   showDialog('foo');
});

$("#edit").click(function(){
   showDialog('bar');
});

你想要的复杂程度与buttons/dialogs/etc的数量成正比。你预见自己有。

Answer 3

您可以在链接中使用数据属性：

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});


$(".modalTrigger").click(function(){
    var myModal = $(this).attr("data-modal");
    $('#' + myModal).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

链接：

<a class="modalTrigger" data-modal="dialog1">New</a>

<a class="modalTrigger" data-modal="dialog2">Edit</a>

<div class="dialog" id="dialog1">

<div class="dialog" id="dialog2">

还有一个fiddle

你也可以像你说的那样使用href属性：

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});


$(".modalTrigger").click(function(){
    var myModal = $(this).attr("href");
    $(myModal).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});

html:

<a class="modalTrigger" href="#dialog1">New</a>
<a class="modalTrigger" href="#dialog2">Edit</a>

Answer 4

我稍微修改了你的 fiddle。每个 "a" 都有一个名为 btn 的 class，id 必须与相关对话框 div 上名为 data-content 的属性相匹配。 https://jsfiddle.net/28t6t51x/1

$(".btn").click(function () {
var a = $(this).attr("id");
$("div.dialog").each(function () {
    if ($(this).attr("data-content") === a) {
        $(this).stop().fadeIn(300);
        $('.overlay').fadeIn(300);
    }
});

你如何根据按下的按钮调出不同的对话框

How do you bring up different dialogs depending on what button is pressed

html

css

jquery

modal-dialog