html - 模态显示所有链接的相同信息

Question

我刚刚使用 Bootstrap 代码创建了我的第一个模态，我已经整理好我想要显示的所有信息，但“阅读更多”链接始终指向第一个模态。我知道我必须将每个模态设置为拥有自己唯一的 ID，但我只是不确定如何去做。我不熟悉 javascript，我想我可能必须了解它才能使其正常工作。

非常感谢任何建议

非常感谢

https://jsfiddle.net/rufusbear/f6xkk4ch/

    <div class="one-fourth">
        <div class="image-bg">
          <img src="img/Tracey.jpg" alt="Tracey Riddington" />
          <h5>Tracey Riddington<br>Manager</h5>
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Read More</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Tracey Riddington - Manager</h4>
                </div>
                <div class="modal-body">
                  <img class="modal-img" src="img/Tracey.jpg" alt="Tracey Riddington" />
                  <p>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).<br><br>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member). Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).<br><br>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.<br><br>Qualified CPSA Coach (Life Member) APSI (Fellow Member).</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="one-fourth">
        <div class="image-bg">
          <img src="img/KevinLock.jpeg" alt="Kevin Lock" />
          <h5>Kevin Lock<br>Grounds Manager</h5>
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Read More</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Kevin Lock - Grounds Manager</h4>
                </div>
                <div class="modal-body">
                  <img class="modal-img" src="img/KevinLock.jpeg" alt="Kevin Lock" />
                  <p>...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    /*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=99797a3288748184e66844825ee3172f)
 * Config saved to config.json and https://gist.github.com/99797a3288748184e66844825ee3172f
 */


/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */


   .one-fourth {
  width: 23%;
  float: left;
  text-align: center;
  margin: 2% 0% 1% 2.5%;
}

.image-bg {
  background: #e9e8e6;
  padding: 10px 0;
  width: 95%;
}

hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0
}

button {
  overflow: visible
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto
}

[role="button"] {
  cursor: pointer
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

.btn-primary {
  color: #fff;
  background-color: #718373;
}

.btn-primary .badge {
  color: #718373;
  background-color: #fff
}

.btn-lg {
  padding: 5px 15px;
  line-height: 1.3333333;
  border-radius: 3px
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px
}

.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px
}

.btn-block {
  display: block;
  width: 100%
}

.btn-block+.btn-block {
  margin-top: 5px
}

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear
}

.fade.in {
  opacity: 1
}

.collapse {
  display: none
}

.collapse.in {
  display: block
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  filter: alpha(opacity=20)
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none
}

.modal-open {
  overflow: hidden
}

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0)
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px
}

.modal-content {
  position: relative;
  background-color: #718373;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
  color: #fff;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0)
}

.modal-backdrop.in {
  opacity: .5;
  filter: alpha(opacity=50)
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5
}

.modal-header .close {
  margin-top: -2px
}

.modal-title {
  margin: 0;
  line-height: 1.42857143
}

.modal-body {
  position: relative;
  padding: 15px
}

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
  margin-left: 5px;
  margin-bottom: 0
}

.modal-footer .btn-group .btn+.btn {
  margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
  margin-left: 0
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll
}

@media (min-width:768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)
  }
  .modal-sm {
    width: 300px
  }
}

@media (min-width:992px) {
  .modal-lg {
    width: 900px
  }
}

.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table
}

.clearfix:after,
.modal-header:after,
.modal-footer:after {
  clear: both
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.pull-right {
  float: right !important
}

.pull-left {
  float: left !important
}

.hide {
  display: none !important
}

.show {
  display: block !important
}

.invisible {
  visibility: hidden
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0
}

.hidden {
  display: none !important
}

.affix {
  position: fixed
}

Answer 1

把第二个的id改成myModal2和第二个 data-target 的值 read more add myModal2

https://jsfiddle.net/f6xkk4ch/2/

<div class="one-fourth">
    <div class="image-bg">
      <img src="img/Tracey.jpg" alt="Tracey Riddington" />
      <h5>Tracey Riddington<br>Manager</h5>
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Read More</button>
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Tracey Riddington - Manager</h4>
            </div>
            <div class="modal-body">
              <img class="modal-img" src="img/Tracey.jpg" alt="Tracey Riddington" />
              <p>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).<br><br>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member). Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).<br><br>Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.Qualified CPSA Coach (Life Member) APSI (Fellow Member).Manager of Fennes Shooting School for 25 years. Has been shooting for 33 years, coaching for 28 years and has shot for England 12 times.<br><br>Qualified CPSA Coach (Life Member) APSI (Fellow Member).</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

   <div class="one-fourth">
    <div class="image-bg">
      <img src="img/KevinLock.jpeg" alt="Kevin Lock" />
      <h5>Kevin Lock<br>Grounds Manager</h5>
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Read More</button>
      <!-- Modal -->
      <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Kevin Lock - Grounds Manager</h4>
            </div>
            <div class="modal-body">
              <img class="modal-img" src="img/KevinLock.jpeg" alt="Kevin Lock" />
              <p>...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>