我有一个这样的按钮:
<button class="facebook text-white" href='http://www.facebook.com/sharer.php?u=url.com'>
<img src="{{ asset('assets/img/facebook.png') }}">
<span>{{"share" | trans}}</span>
</button>
我有一个名为social.js的js文件,其中包含以下内容:
$(document).ready(function(){
$(".twitter").click(function(e) {
e.preventDefault();
var href = $(e.target).attr('href');
window.open(href, "Share your stats on Twitter!", "height=300,width=550")
});
$(".facebook").click(function(e) {
e.preventDefault();
var href = $(e.target).attr('href');
window.open(href, "Share you stats on Facebook!", "height=300,width=550")
});
});
这导致了奇怪的行为,因为有时指定的链接会加载并打开,有时它只会保持在:空白。
每次点击后,如果打开链接,它似乎完全随机。
如何修复这种片状行为?
答案 0 :(得分:2)
使用jQuery UI dialog非常简单:(动态)创建一个div并调用$(div).dialog()
:
$('.dialog-button').click(function (ev) {
ev.preventDefault();
$('<div/>', {
title: 'Your facebook link here!',
css: {
position: 'relative'
},
append: $('<iframe/>', {
src: $(ev.target).data('href'),
css: {
position: 'absolute',
left: 0, right: 0,
top: 0, bottom: 0,
width: '100%', height: '100%',
border: 0
}
})
}).dialog({
modal: true, resizable: false,
height: 200, width: 350
});
});
&#13;
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
<button class="dialog-button" data-href="http://example.com">Click me!</button>
</body>
&#13;
答案 1 :(得分:1)
您应该在$(this)
中使用e.target
代替window.open
。
为什么呢?检查这个问题:Difference between $(this) and event.target?