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警報箱固定位置問題？

回答

相關問題