模态弹出重复数据

时间：2016-08-17 15:31:30

标签： javascript jquery html css

HTML 

<a class="btn" data-popup-open="popup-1" href="#">More Details</a>

  <div class="popup" data-popup="popup-1">
    <div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #1)</h2>
    <p>Per Serve : 5g   Energy : 20kcal Protein : 0.0g Fat­Total : 0.0g  Saturated &nbsp; 0.0g  Carbohydrate : 0.0g Package Size : 1 x 24 x 350 g</p>
    <p><a data-popup-close="popup-1" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
     </div>
  </div>

<a class="btn" data-popup-open="popup-1" href="#">Quick inquiry</a>

  <div class="popup" data-popup="popup-1">
    <div class="popup-inner">
    <h2>This is the one that wont work(Popup #1)</h2>
    <p>Another data that wont appear</p>
    <p><a data-popup-close="popup-1" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
   </div>
 </div>

CSS：

/* Outer */
.popup {
  width:100%;
  height:100%;
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  background:rgba(0,0,0,0.75);
}

/* Inner */
.popup-inner {
  max-width:700px;
  width:90%;
  padding:40px;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  box-shadow:0px 2px 6px rgba(0,0,0,1);
  border-radius:3px;
  background:#fff;
}

/* Close Button */
.popup-close {
  width:30px;
  height:30px;
  padding-top:4px;
  display:inline-block;
  position:absolute;
  top:0px;
  right:0px;
  transition:ease 0.25s all;
  -webkit-transform:translate(50%, -50%);
  transform:translate(50%, -50%);
  border-radius:1000px;
  background:rgba(0,0,0,0.8);
  font-family:Arial, Sans-Serif;
  font-size:20px;
  text-align:center;
  line-height:100%;
  color:#fff;
}

.popup-close:hover {
  -webkit-transform:translate(50%, -50%) rotate(180deg);
  transform:translate(50%, -50%) rotate(180deg);
  background:rgba(0,0,0,1);
  text-decoration:none;
}

jQuery的：

$(function() {
//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

    e.preventDefault();
});

//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    e.preventDefault();
});
});

代码有效，但它没有显示第二个弹出式内容。我已经尝试了不同的jquery弹出窗口，但没有任何更改弹出窗口内的数据。单击下一个按钮时，框中的数据保持不变。我该如何解决这个问题？

4 个答案:

答案 0 :(得分：1)

您必须更改每个弹出窗口的data-popup属性，例如第一个popup-1，第二个popup-2：

<a class="btn" data-popup-open="popup-1" href="#">More Details</a>

  <div class="popup" data-popup="popup-1">
    <div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #1)</h2>
    <p>Per Serve : 5g   Energy : 20kcal Protein : 0.0g Fat­Total : 0.0g  Saturated &nbsp; 0.0g  Carbohydrate : 0.0g Package Size : 1 x 24 x 350 g</p>
    <p><a data-popup-close="popup-1" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
     </div>
  </div>

<a class="btn" data-popup-open="popup-2" href="#">Quick inquiry</a>

  <div class="popup" data-popup="popup-2">
    <div class="popup-inner">
    <h2>This is the one that wont work(Popup #2)</h2>
    <p>Another data that wont appear</p>
    <p><a data-popup-close="popup-2" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
   </div>
 </div>

答案 1 :(得分：0)

您需要更改第二个data-popup-open元素的<a>值，并更改第二个data-popup元素上的<div class="popup">以匹配。这是假设你的javascript和css工作。

＆＃13;
＆＃13; 
<a class="btn" data-popup-open="popup-1" href="#">More Details</a>

<div class="popup" data-popup="popup-1">
  <div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #1)</h2>
    <p>Per Serve : 5g Energy : 20kcal Protein : 0.0g Fat­Total : 0.0g Saturated &nbsp; 0.0g Carbohydrate : 0.0g Package Size : 1 x 24 x 350 g</p>
    <p><a data-popup-close="popup-1" href="#">Close</a>
    </p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
  </div>
</div>

<!-- Changed data-popup-open to popup-2 -->
<a class="btn" data-popup-open="popup-2" href="#">Quick inquiry</a>
<!-- Change data-popup to popup-2 -->
<div class="popup" data-popup="popup-2">
  <div class="popup-inner">
    <h2>This is the one that wont work(Popup #1)</h2>
    <p>Another data that wont appear</p>
    <p><a data-popup-close="popup-1" href="#">Close</a>
    </p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您需要更改第二个模式中的 package com.cma.services; import com.cma.domains.StreetType; import com.cma.repositories.StreetTypeRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class StreetTypeServiceImpl implements StreetTypeService { private StreetTypeRepository streetTypeRepository; @Autowired public void setStreetTypeRepository(StreetTypeRepository streetTypeRepository) { this.streetTypeRepository = streetTypeRepository; } @Override public Iterable<StreetType> list() { return streetTypeRepository.findAll(); } @Override public StreetType find(Integer key) { return streetTypeRepository.findOne(key); } @Override public StreetType save(StreetType entity) { return streetTypeRepository.save(entity); } @Override public void delete(Integer key) { streetTypeRepository.delete(key); } } package com.cma.services; import com.cma.domains.StreetType; public interface StreetTypeService extends BasicService<StreetType,Integer> { } package com.cma.services; /** * * @param <E> * @param <K> */ public interface BasicService<E,K> { Iterable<E> list(); E find(K key); E save(E entity); void delete(K key); } 和data-popup-open 

data-popup

https://jsfiddle.net/873ww7pj/

答案 3 :(得分：0)

检查此片段的工作..以获取更多模式更改ID或弹出名称

$(function() {
//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

    e.preventDefault();
});

//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    e.preventDefault();
});
});
/* Outer */
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}

/* Inner */
 .popup-inner {
max-width:700px;
width:90%;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}

/* Close Button */
.popup-close {
width:30px;
height:30px;
padding-top:4px;
display:inline-block;
position:absolute;
top:0px;
right:0px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:rgba(0,0,0,0.8);
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#fff;
}

.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:rgba(0,0,0,1);
text-decoration:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn" data-popup-open="popup-1" href="#">More Details</a>

  <div class="popup" data-popup="popup-1">
    <div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #1)</h2>
    <p>Per Serve : 5g   Energy : 20kcal Protein : 0.0g Fat­Total : 0.0g  Saturated &nbsp; 0.0g  Carbohydrate : 0.0g Package Size : 1 x 24 x 350 g</p>
    <p><a data-popup-close="popup-1" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
     </div>
  </div>

<a class="btn" data-popup-open="popup-2" href="#">Quick inquiry</a>
  <div class="popup" data-popup="popup-2">
    <div class="popup-inner">
    <h2>This is the one that wont work(Popup #1)</h2>
    <p>Another data that wont appear</p>
    <p><a data-popup-close="popup-2" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
   </div>
 </div>

相关问题
最新问题