Question

我刚刚使用引导程序代码创建了我的第一个模态，我将所有要显示的信息整理出来但是“阅读更多”＆＃39;链接始终指向第一个模态。我知道我将不得不设置每个模态以拥有自己独特的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的值更多添加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>

Answer 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" name="first" 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="#myModal1">Read More</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal1" 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>

Answer 3

您对两个模态使用相同的ID（即id="myModal"）。请注意，id应该是唯一值。

将第二个按钮中的data-target="#myModal"属性更改为data-target="#myModal2"
同时将第二模式的id="myModal"更改为id="myModal2"。

Updated fiddle

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

3 个答案:

我修改了你的代码..请检查