我需要显示一个弹出式div。我有一个表单form1
和一个类data_class
,它从数据库中获取必要的信息并将其显示在弹出窗口中。
部分代码data_class
:
case "get_data":
//some variable declaration here
//some code here
//some query here
$exp = explode("|", $row['notes'], 2);
$pos = strpos($exp[0], ' ', 10); //limits word count
$lim = substr($exp[0],0,$pos);
$datas=$datas."<div style=' margin-top:5px; width: 100%;'>".$lim."<a class="btn" data-popup-open="popup-1" href=\"#\" onclick=''>test popup</a></div>";}
^这给了我一个错误:
解析错误:语法错误,意外&#39;弹出&#39; (T_STRING)。
在form1
中弹出div CSS:
<style>
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
.popup-inner {
max-width:300px;
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;
}
.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;
}
</style>
form1
中的HTML弹出式div:
<a class="btn" data-popup-open="popup-1" href="#">test popup</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<h2>TITLE HERE</h2>
<p>this is a trial. display complete information here!</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>
form1
中的弹出式脚本:
$(function() {
//OPEN POPUP
$('[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 POPUP
$('[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();
});
});
如果它直接在form1
中,我可以将其设为有效但是如何通过data_class
执行此操作?我想我无法使用data_class
中的脚本,所以现在我完全不知道从哪里开始。最好的方法是什么?提前谢谢!
答案 0 :(得分:1)
在以下行中使用 single qoutes 代替 double qoutes :
$datas=$datas."<div style=' margin-top:5px; width: 100%;'>".$lim."<a class="btn" data-popup-open="popup-1" href=\"#\" onclick=''>test popup</a></div>";}
这样做:
$datas=$datas."<div style=' margin-top:5px; width: 100%;'>".$lim."<a class='btn' data-popup-open='popup-1' href='#' onclick=''>test popup</a></div>";}
如果我错了,请评论。