Question

我正在开始一个项目，我设想需要大量的对话框/模态。

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

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

有没有办法让一个脚本可能需要一个href值？或者某种方式我可以在一个标签上放一个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;
}

SCRIPT：

$(".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（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');
});

您想要获得的复杂程度与按钮/对话框/等的数量成正比。你预见到了自己。

Answer 2

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

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

我修改了你的小提琴。每个“a”都有一个名为btn的类，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);
    }
});

Answer 4

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

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

您必须将create tag的id更改为create-new，请参阅precedence

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

4 个答案: