いくつかのdivは異なるコンテンツを隠していますが、一意のIDを持つリンクを持っています。どのように私はそれらのすべてのボタンを同じ機能をトリガし、自分のコンテナのためだけに動作させることができますか?HTMLリンク(a)が異なるIDを持つことで、同じコンテナの同じ機能をトリガーするdiv
$(document).ready(function() {
$("#:input[id^='myBtn_']").click(function() {
showPopup();
});
$(".modal-content").click(function() {
$(this).hide();
$("#mask").hide();
});
});
function showPopup() {
// show the mask
$("#mask").fadeTo(500, 0.25);
// show the popup
$(".modal-content").show();
}
* {
margin: 0, padding 0
}
#mask {
position: absolute;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 10000;
}
.modal-content {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 25%;
width: 450px;
height: auto;
margin: 10px auto;
border: 1px solid #333;
background-color: #ffff;
color: #000;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 10001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toptop">
<h4>test1</h4>
<div class="someclass">Title</div>
<a href="javascript:;" id="myBtn test1">Read more...</a>
<div class="modal" id="myModal test1">
<div id="mask"> </div>
<div class="modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="toptop">
<h4>test2</h4>
<div class="someclass">Title</div>
<a href="javascript:;" id="myBtn test2">Read more...</a>
<div class="modal" id="myModal test2">
<div id="mask"> </div>
<div class="modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
'$( "#:入力[ID^= 'myBtnです_']")' '#'はここで何をしているのですか?このような 使用複数のIDも許可されません。代わりにクラスを使用する – guradio