Question

我有3个链接按钮，文本和类buy-input-text buy-input-general相同。它们都会触发相同的模态对话框。我想根据点击的按钮自定义模态对话框。例如，更改h3元素。这样做的首选方式是什么？

jQuery(document).ready(function($){

$(".showModalView").click(function(){
	$("#buy-wrapper").show();
console.log("showModalView");

});

$("#buy-wrapper").click(function(e){
	if ($(e.target).closest("#buy-box").length === 0)
		$("#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;
	  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

如果是HTML5项目，则可以使用data-*属性。

Answer 2

以下是一些输入。

使用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>

区分非常相似的按钮点击

2 个答案: