JQuery - 相对于按钮的位置弹出 [英] JQuery - Position Popup in relative to button(s)
问题描述
我试图相对于其按钮或用jquery点击的按钮定位一个弹出窗口。我想把弹出窗口放在一个不覆盖按钮本身的方式。将其放置在所单击的按钮的左侧,右侧,上方或下方。
I'm trying to position a popup relative to its button or the button that is clicked with jquery. I'd like to position the popup in a way that doesn't cover up the button itself. Position it to the left, right, above or below the button that is clicked.
现在我知道我可以通过编写更多的html弹出框和CSS来做到这一点,但是必须有一种方法来动态使用一个div并用jquery定位。我试着使用偏移和位置(在一个点),但我不能得到它的工作。坦率地说,我很高级的js和jquery所以原谅我的noobness。
Now I know I can do this by writing more html popups and css but there got to be a way to dynamically use one div and position it with jquery. I tried using offsets and position (at one point) but I couldn't get it to work. Frankly, I'm very entry level with js and jquery so forgive my noobness.
任何帮助将非常感谢!
JS:
$('.trends').click(function () {
$('.questions').fadeIn();
$('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');
/* if I add this and zero out the positioning via css the pop gets offset but its way far away from this parent.
var offset = $(this).offset();
$('.questions').css('left',offset.left);
$('.questions').css('top',offset.top);*/
});
$('.consumer').click(function () {
$('.questions').fadeIn();
$('.question').html('<p>Even though we have low inflation, consumers are not increasing their spending. Why?</p>');
});
$('.industry').click(function () {
$('.questions').fadeIn();
$('.question').html('<p>What factors drove crude oil prices to fall and which industries benefited?</p>');
});
$('.henn').click(function () {
$('.questions').fadeIn();
$('.question').html('<p>MESSAGE FROM OUR PRESIDENT</p>');
var offset = $(this).offset();
$('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');
});
$('.equity').click(function () {
$('.questions').fadeIn();
$('.question').html('<p>The U.S. stock market has been rising for more than six years. What do you see ahead for equities?</p>');
});
$('.balance').click(function () {
$('.questions').fadeIn();
$('.question').html('<p>what does it look like for companies balance sheets?</p>');
});
$('.close').click(function (e) {
e.stopPropagation();
$(this).parent().hide();
$('.items').removeClass('no-effect');
});
推荐答案
创建一个单独的函数来显示问题,问题作为参数:
Create a separate function to display the question, which takes the clicked button and the question as parameters:
function showQuestion(button, question) {
var offset = button.offset();
$('.question').html(question);
$('.questions')
.fadeIn()
.css({
left: Math.min(offset.left, $(window).innerWidth()-$('.questions').outerWidth()),
top: offset.top + button.innerHeight()
});
}
这样调用:
$('.trends').click(function () {
showQuestion(
$(this),
'<p>What trends could potentially drive growth in the U.S.?</p>'
);
});
css
将始终显示在屏幕上。
The css
left calculation ensures that the question will always be on-screen.
这篇关于JQuery - 相对于按钮的位置弹出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!