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

Question

我正在启动一个元素，我预计需要大量的对话框/模式。

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

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

是否有一种方法可以只使用一点脚本来获取 a 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

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

$(".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>