模式弹出重复数据
Modal pop up repeating data
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 FatTotal : 0.0g Saturated 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弹出窗口,但没有改变弹出窗口中的数据。单击下一个按钮时,框中的数据保持不变。我该如何解决此问题?
您必须更改每个弹出窗口的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 FatTotal : 0.0g Saturated 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>
您需要更改第二个<a>
元素上的data-popup-open
值,并更改第二次<div class="popup">
元素上的data-popup
以匹配。这是在您的javascript和css工作的假设下进行的。
<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 FatTotal : 0.0g Saturated 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>
您需要在第二个模式中更改data-popup-open
和data-popup
<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 FatTotal : 0.0g Saturated 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>
https://jsfiddle.net/873ww7pj/
检查此片段的工作情况。。要获得更多模式,请更改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 FatTotal : 0.0g Saturated 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>
相关文章:
- 数据属性仅在切换设备模式下工作
- Ember数据:DS.EmbeddedRecordsMixin的预期使用模式
- 如何在模式框中显示ajax调用返回的数据
- 将图像文件存储在猫鼬模式中的二进制数据中,并以html形式显示图像
- 使用mongoose将数据推送到mongoDB模式中的数组中
- 使用jQuery保存模式弹出数据
- 用于筛选无模式集合的最快数据结构
- 使用Angular not Binding引导模式绑定数据
- 挖空和显示模块模式的数据绑定问题
- 我无法从引导模式中清除表单数据
- 无法销毁引导模式数据
- twitter引导模式——如何将数据传递给回调函数
- 在引导模式中,点击相应的datatables行中的按钮,填充数据
- JSON数据应该覆盖JSON模式吗?(通过jdorn/json编辑器使用模式和数据)
- PHP根据用户选择的项目以模式加载数据
- angularjs设计模式和从服务器获取数据的最佳实践
- PHP-Jquery-简单模式的开放数据
- 将JSON数据注入AngularJS引导模式
- 数据模式样式,应该'name'对象的键或属性
- HandsOnTable -如何在数据模式中使用行头