如何根據按下哪個按鈕來調出不同的對話框

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

您可以使用數據屬性：

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

你可以搶點擊的元素ID和追加對話框

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

你將不得不改變創建標籤來創建新的ID，看到https://jsfiddle.net/depperm/1e2qxu2b/

Answer 3

沒問題 - 你可以創建一個輔助函數，它接受一個I​​D（fiddle）：

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

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

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

或者，通過類似的機制，有個一個對話框，並具有點擊處理程序將裏面它（​​）文本：

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 4

我修改了一下你的小提琴。每個「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); 
    } 
});