如何动态加载模态

时间：2017-03-10 09:46:41

标签： javascript jquery css html5

您好我想知道如何在不同的图像上动态加载模态。这是我目前的网页。

enter image description here

假设当我点击pi图像的生命时，这就是弹出的模态。

enter image description here

我希望其他图像能够发生同样的事情。假设如果我点击Kite Runner图像，它会打开一个模式，左边是风筝流道图像，右边是文本。

这是我目前的代码 

$(document).ready(function() {
      var $modal = $("#myModal");
      $("#lifeofpi").click(function() {
        $modal.show();
      });
      $modal.find('.close').click(function() {
        $modal.hide();
      });
    });
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 700px;
height: 500px;
background-color: #101010;

}


/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

  

.modallifeofpi {
 cursor: pointer;
 height: 160px; // height
 //width: 30%; // width
 border: 5px solid white;
 display: inline;
 margin-top:0px;
 position: absolute;
 }


 .modalheader {
 color:white;
 margin:0;
 margin-left: 470px;

 }

 .modalheadertext {
 color:white;
 margin-left: 350px;
 margin-top:40px;
 }
  
 .review-img {
  cursor: pointer;
  height: 160px; // height
  //width: 30%; // width
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img> </img>
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>

<!-- The Modal -->
<div id="myModal" class="modal">
  	<!-- Modal content -->
  	<div class="modal-content">
  		<span class="close">&times;</span>

  <img class="modallifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
  <h1 class="modalheader">Life of pi</h1>
  <h2 class="modalheadertext">Published:</h2>
  	 </div>
</div>

3 个答案:

答案 0 :(得分：2)

您可以绑定所有图像并将图像信息传递给模态。

$(document).ready(function() {
      var $modal = $("#myModal");
      $(".images img").click(function() {
    $modal.find('img.modallifeofpi').attr('src',$(this).attr('src'));
    $modal.find('.modalheader').text($(this).attr('alt'));
    $modal.show();
});
$modal.find('.close').click(function() {
    $modal.hide();
});
    });
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 700px;
height: 500px;
background-color: #101010;

}


/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

  

.modallifeofpi {
 width: 300px;
 height: 450px;
 border: 5px solid white;
 display: inline;
 margin-top:0px;
 position: absolute;
 }


 .modalheader {
 color:white;
 margin:0;
 margin-left: 470px;

 }

 .modalheadertext {
 color:white;
 margin-left: 350px;
 margin-top:40px;
 }
  
 .review-img {
  cursor: pointer;
  height: 160px; // height
  //width: 30%; // width
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img> </img>
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>

<!-- The Modal -->
<div id="myModal" class="modal">
  	<!-- Modal content -->
  	<div class="modal-content">
  		<span class="close">&times;</span>

  <img class="modallifeofpi" src="./images/lifeofpi.jpg"></img>
  <h1 class="modalheader">Life of pi</h1>
  <h2 class="modalheadertext">Published:</h2>
  	 </div>
</div>

答案 1 :(得分：0)

使用类作为选择器并将图像源设置为图像上的attr。您也可以通过这种方式填写其他字段

$(document).ready(function() {
    var $modal = $("#myModal");
    $(".modal-img").click(function() {
        $modal.find('img.modallifeofpi').attr('src',$(this).attr('img-src'));
        $modal.find('.modalheader').text($(this).attr('img-title'));
        $modal.show();
    });
    $modal.find('.close').click(function() {
        $modal.hide();
    });
});

和HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img modal-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" img-title="Life of pi" img-src="./images/lifeofpi.jpg" alt="lifeofpi"></img>
<img class="review-img modal-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" img-title="Kite Runner" img-src="./images/kiterunner.jpg" alt="kiterunner"></img> </img>
<img class="review-img modal-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" img-title="Star Wars" img-src="./images/starwars.jpg" alt="starwars"></img>
<img class="review-img modal-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" img-title="Twinlight" img-src="./images/twinlight.jpg" alt="twilight"></img>
</section>

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>

  <img class="modallifeofpi" src=""></img>
  <h1 class="modalheader">Life of pi</h1>
  <h2 class="modalheadertext">Published:</h2>
     </div>
</div>

答案 2 :(得分：0)

将img的属性分配给模态，然后显示模态。请查看以下示例。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var $modal = $("#myModal");
  var src = "";

  $('.images img').click(function() {
    $img = $(this);
    $modal.find('img').attr('src', $img.attr('src'));
    $modal.find('.modalheader').text($img.attr('alt'));
    $modal.show();
  });


  $('#myModal .close').click(function() {
    $modal.hide();
  });
});
＆＃13; 
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.7);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 700px;
  height: 500px;
  background-color: #101010;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.review-img {
  cursor: pointer;
}

.modallifeofpi {
  width: 300px;
  height: 450px;
  border: 5px solid white;
  display: inline;
  margin-top: 0px;
  position: absolute;
}

.modalheader {
  color: white;
  margin: 0;
  margin-left: 470px;
}

.modalheadertext {
  color: white;
  margin-left: 350px;
  margin-top: 40px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class='images'>
  <img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi" />
  <img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner" />
  <img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars" />
  <img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight" />
</section>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <img class="modallifeofpi" src="./images/lifeofpi.jpg" />
    <h1 class="modalheader">Life of pi</h1>
    <h2 class="modalheadertext">Published:</h2>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题