[英]Find attr('href') and open inside hidden iframe on the page, then show() iframe (jQuery + PHP)
Language: PHP and jQuery 语言: PHP和jQuery
What I'm trying to do is pop up a dynamic link when a user clicks on it. 我正在尝试做的是在用户点击它时弹出一个动态链接。
I don't want the page to be opened in a new window though, but in a modal one which overlays on the current page. 我不希望在新窗口中打开页面,但是在当前页面上覆盖的模式页面中。
So with javascript, when a user clicks on this link, the action is to find the link's attr href
and make a code for THAT link to be inside an iframe within the modal window. 因此,使用javascript,当用户点击此链接时,操作是找到链接的attr
href
,并使该链接的代码位于模态窗口内的iframe内。
The HTML with dynamic PHP link: 带有动态PHP链接的HTML :
<a href="http://www.facebook.com/share.php?u=<?php echo $root_url; ?>?id=<?php echo $rows['id']; ?>&title=<?php echo urlencode($rows['keyword']); ?>" style="border: none;" onclick="return false;" class="fblink" target="iframe"><img src="./img/Facebook.png" style="float: right; margin-top: 0px;" title="Share on Facebook" alt="Share on Facebook" id="<?php echo $rows['id']; ?>"></a>
The jQuery script : jQuery脚本 :
var makePop = function() {
link = $(this).attr('href');
return '<div class="the_box" id="box" style="display: block;"><a class="boxclose" id="boxclose"></a>
<iframe src="' + link + '" height="500px" width="600px" id="" name="iframe"></iframe></div>';
} // End of Function.
$("a.fblink").click(makePop);
I don't know how to make this happen... This is not working. 我不知道如何实现这一点......这是行不通的。
Anybody? 任何人? :o)
:O)
The following should provide what your looking for. 以下内容应该提供您所需要的内容。 However would need to consider issues such as same origin policy for the XHR 'load' call.
但是,需要考虑XHR“加载”调用的相同原始策略等问题。
See example at: http://jsfiddle.net/qeXea/2/ 参见示例: http : //jsfiddle.net/qeXea/2/
Note: Due to same origin policy the iframe isn't able to populate with the content, simply setup your own page on your website and use your own urls to view. 注意:由于相同的原始政策,iframe无法填充内容,只需在您的网站上设置您自己的页面并使用您自己的网址进行查看。
HTML HTML
<a href="http://www.yoururl.com" onclick="launchUrl(this); return false;">Click Here</a>
<div id="fade"></div>
<iframe id="dialog" src=""></iframe>
<script type="text/javascript">
function launchUrl(owner) {
$('#fade').show();
var link = $(owner).attr('href');
$('#dialog').load(link, function(response) {
$('#dialog').show();
});
}
</script>
CSS CSS
#fade {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
}
#dialog {
top: 100px;
left: 100px;
width: 200px;
height: 200px;
z-index: 101;
display: none;
position: absolute;
}
Alternative 替代
HTML HTML
<a href="" onclick="launchUrl('http://www.yoururl.com'); return false;">Click Here</a>
<div id="fade"></div>
<iframe id="dialog" src=""></iframe>
<script type="text/javascript">
function launchUrl(link) {
$('#fade').show();
$('#dialog').load(link, function(response) {
$('#dialog').show();
});
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.