jQuery警报箱固定位置问题？

我遇到一个小问题，我的jQuery警告框位于页面的中心以外的任何位置。只要我的按钮功能开始，它将其设置为页面的中心。jQuery警报箱固定位置问题？

我想在div上使用一个班级给它一个固定的位置来尝试改变这个，但仍然没有快乐有人知道我可能会在这里出错吗？

谢谢。

function myFunction() { 
 
    $("#dialog1").dialog("open"); 
 
} 
 

 
$(function() { 
 
    $("#dialog1").dialog({ 
 
    autoOpen: false, 
 
    show: { 
 
     effect: "puff", 
 
     duration: 300 
 
    }, 
 
    hide: { 
 
     effect: "clip", 
 
     duration: 500 
 
    } 
 
    }); 
 

 
    $("#opener").on("click", function() { 
 
    $("#dialog1").dialog("open"); 
 
    }); 
 

 
});

.alertBox { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 

 
<div id="dialog1" class="alertBox" title="Alert Title!"> 
 
    <p>Alert Message Example</p> 
 
</div> 
 

 
<body> 
 
    <button onclick="myFunction()">OPEN ALERT</button> 
 
</body> 
 

 
</html>

来源

2017-09-01 Mike Toms

[位置jQuery的对话框（可能的重复https://stackoverflow.com/questions/15716317/position-jquery -dialog-box） – Dasma

也许你知道这一点，但＃dialog1 div不在body标签中。 – wpalmes

jQuery的对话框中有一个内置的position option，你可以利用：

指定在打开时要显示的对话框。该对话框将处理碰撞，以便尽可能多地显示对话框。

$("#dialog1").dialog({ 
    position: {my: 'right bottom', at: 'right bottom'} 
});

落实到你的代码，它看起来像这样：

function myFunction() { 
 
    $("#dialog1").dialog("open"); 
 
} 
 

 
$(function() { 
 
    $("#dialog1").dialog({ 
 
    autoOpen: false, 
 
    show: { 
 
     effect: "puff", 
 
     duration: 300 
 
    }, 
 
    hide: { 
 
     effect: "clip", 
 
     duration: 500 
 
    }, 
 
    position: {my: 'right bottom', at: 'right bottom'} 
 

 
    }); 
 

 
    $("#opener").on("click", function() { 
 
    $("#dialog1").dialog("open"); 
 
    }); 
 

 
});

.alertBox { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 

 
<div id="dialog1" class="alertBox" title="Alert Title!"> 
 
    <p>Alert Message Example</p> 
 
</div> 
 

 
<body> 
 
    <button onclick="myFunction()">OPEN ALERT</button> 
 
</body> 
 

 
</html>

来源

2017-09-01 14:32:37 Santi

我不知道这个谢谢你的帮助！ –

对话框有一个位置属性。您可以设置“left”，“center”，“right”等短语，甚至可以将其与pixel/percentage值结合使用。

my定义了元素本身的位置，并且at定义了对准到目标元素的位置。

看一看这个小提琴：

function myFunction() { 
 
    $("#dialog1").dialog("open"); 
 
} 
 

 
$(function() { 
 
    $("#dialog1").dialog({ 
 
    autoOpen: false, 
 
    position: {my: 'center+20px', at: 'bottom'}, 
 
    show: { 
 
     effect: "puff", 
 
     duration: 300 
 
    }, 
 
    hide: { 
 
     effect: "clip", 
 
     duration: 500 
 
    } 
 
    }); 
 

 
    $("#opener").on("click", function() { 
 
    $("#dialog1").dialog("open"); 
 
    }); 
 

 
});

.alertBox { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 

 
<div id="dialog1" class="alertBox" title="Alert Title!"> 
 
    <p>Alert Message Example</p> 
 
</div> 
 

 
<body> 
 
    <button onclick="myFunction()">OPEN ALERT</button> 
 
</body> 
 

 
</html>

来源

2017-09-01 14:39:24 hallleron

jQuery警报箱固定位置问题？

回答

相关问题