различают очень похожие нажатия кнопок

Question

У меня есть 3 кнопки с одним и тем же текстом и классом buy-input-text buy-input-general. Все они запускают один и тот же модальный диалог. Я хотел бы настроить модальный диалог, на основе которого была нажата кнопка. Например, измените элемент h3. Каков предпочтительный способ сделать это?

jQuery(document).ready(function($){ 
 

 
$(".showModalView").click(function(){ 
 
\t $("#buy-wrapper").show(); 
 
console.log("showModalView"); 
 

 
}); 
 

 
$("#buy-wrapper").click(function(e){ 
 
\t if ($(e.target).closest("#buy-box").length === 0) 
 
\t \t $("#buy-wrapper").hide(); 
 
console.log("closeModalView"); 
 

 
}); 
 

 

 
});

.buy-input-general { 
 
    outline: none; 
 
} 
 

 
#buy-wrapper { 
 
    display:none; 
 
    position:absolute; 
 
    top:25vh; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
} 
 

 
#buy-box { 
 
    width: 345px; 
 
    height: 470px; 
 
    background-color: #fff; 
 
    margin: 0 auto; 
 
    -webkit-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 3px; 
 
    border: thin solid #ededed; 
 
} 
 

 
#top_header { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding-top: 45px; 
 
} 
 

 
#top_header > h3 { 
 
    text-align: center; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 32px; 
 
    font-weight: 800; 
 
    color: #282828; 
 
    -webkit-text-stroke: 0.5px; 
 
    margin: 0; 
 

 
} 
 

 
#top_header > h5 { 
 
    text-align: center; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    color: #424242; 
 
    line-height: 1.6; 
 
    margin: 0; 
 
    padding: 15px 0; 
 
    color: #a6a6a6; 
 
    -webkit-text-stroke: 0.2px; 
 
} 
 

 
#buy-inputs { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.buy-input-submit, .buy-input-text { 
 
    width: 300px; 
 
    height: 55px; 
 
    position: relative; 
 
\t margin: 0 auto; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    -webkit-text-stroke: 0.1px; 
 
} 
 

 
.buy-input-text { 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 300; 
 
    border: thin solid #efefef; 
 
    color: #4f4f4f; 
 
} 
 

 
.buy-input-text:focus { 
 
    border: thin solid #ededed; 
 
    -webkit-transition: all .4s ease; 
 
    -moz-transition: all .4s ease; 
 
    -o-transition: all .4s ease; 
 
    transition: all .4s ease; 
 
} 
 

 
.buy-input-text:focus{ 
 
    border-left: thin solid #282828; 
 
} 
 

 

 
.buy-input-submit { 
 
    color: #282828; 
 
    background-color: #fff; 
 
    border: 1px solid #282828; 
 
    border-radius: 2px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    transition: all .2s ease; 
 
    margin-top: 15px; 
 
    cursor: pointer; 
 
    font-size:115%; 
 
} 
 

 
.buy-input-submit:hover { 
 
    background-color: #289928; 
 
    color: #fff; 
 
} 
 

 
.purchase-overlay { 
 
    position:fixed; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    background-color:rgba(0,0,0,0.50); 
 

 
    display:block; 
 
    z-index:1001; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 1</p> 
 
    <div class="button"> 
 
    <a class="showModalView" href="javascript:void(0);">CLICK ME</a> 
 
    <a class="showModalView" href="javascript:void(0);">CLICK ME</a> 
 
    <a class="showModalView" href="javascript:void(0);">CLICK ME</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 

 
</div> 
 

 
<div id="buy-wrapper"> 
 
    <div id="buy-box"> 
 
    <div id="top_header"> 
 
     <h3>Lallaa</h3> 
 
     <h5> 
 
     Enter details. <br /> 
 
      You know, because reasons and stuff. <br />Just do it. 
 
     </h5> 
 
    </div> 
 
    <di id="buy-inputs"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="First name"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="Last name"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="Email"> 
 
     <input class="buy-input-submit buy-input-general" type="submit" value="NEXT"> 
 
    </di> 
 
    <div id="bottom"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вот несколько входов.

• С CSS, если структурировать разметку, как показано ниже (что является урезана версия самостоятельно)

Есть плюсы и минусы - динамические и статические - и т.д .. Так как это Понятно, что вы ищете динамическое решение (и используя jQuery), мы могли бы сделать то же самое (см следующего фрагмента кода)

.button > a { 
 
    display: block; 
 
} 
 
#buy-wrapper > div { 
 
    display: none; 
 
} 
 
#buy-box1:target, 
 
#buy-box2:target, 
 
#buy-box3:target { 
 
    display: block; 
 
} 
 
.dialog-box { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 30%; 
 
    padding: 10px; 
 
    border: 2px solid red; 
 
    z-index: 1000px; 
 
    background-color: #DDD; 
 
    opacity: 0.5; 
 
}

<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 2</p> 
 
    <div class="button"> 
 
    <a class="showModalView" href="#buy-box1">CLICK ME 1</a> 
 
    <a class="showModalView" href="#buy-box2">CLICK ME 2 </a> 
 
    <a class="showModalView" href="#buy-box3">CLICK ME 3</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 
</div> 
 
<hr> 
 
<!-- Custom dialog --> 
 
<div id="buy-wrapper"> 
 
    <div id="buy-box1" class="dialog-box">I am buying from box 1</div> 
 
    <div id="buy-box2" class="dialog-box">I am buying from box 2</div> 
 
    <div id="buy-box3" class="dialog-box">I am buying from box 3</div> 
 
</div>

• Использование jQuery UI

$(document).ready(function() { 
 

 
    // Initialize the `dialog` object. 
 
    var dialogBox = $('#dialog-box').dialog({ 
 
    autoOpen: false, 
 
    buttons: { 
 
     "Ok": function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 

 
    // Attach `click` event handler to the family - showModalView 
 
    $(".showModalView").click(function(eventData) { 
 
    // Get the event target 
 
    var targetElement = eventData.target; 
 

 
    // Example: To set the "item" to buy 
 
    var item = $(targetElement).attr("data-item"); 
 
    $("#dialog-box").find("h2").html("Buy " + item); 
 

 
    // Open up the "dialog box" 
 
    $("#dialog-box").dialog("open"); 
 
    }); 
 

 
});

.button > a { 
 
    display: block; 
 
} 
 
#buy-wrapper > div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> 
 
<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 2</p> 
 
    <div class="button"> 
 
    <a class="showModalView" href="#" data-item="Orange">CLICK ME 1</a> 
 
    <a class="showModalView" href="#" data-item="Apple">CLICK ME 2 </a> 
 
    <a class="showModalView" href="#" data-item="Melon">CLICK ME 3</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 
</div> 
 
<hr> 
 
<!-- Custom dialog --> 
 
<div id="buy-wrapper"> 
 
    <div id="dialog-box" title="Are we okay with order?"> 
 
    <h2></h2> 
 
    <div> 
 
     <span>First name:</span> 
 
     <input type="text" placeholder="Enter First name" /> 
 
    </div> 
 
    <div> 
 
     <span>Last name:</span> 
 
     <input type="text" placeholder="Enter Last name" /> 
 
    </div> 
 
    </div>

Answer 2

Если это проект HTML5, то вы можете использовать data-* атрибуты.