位置彈出div用戶正在尋找

我有一個彈出div工作點擊。我需要彈出窗口出現在用戶正在查看的瀏覽器中。現在在短頁面上，彈出的div無法找到，在長頁面上，您必須向下滾動才能看到彈出窗口。位置彈出div用戶正在尋找

到目前爲止，我已經嘗試了幾次不同的事情在我的popUpDiv沒有運氣。

margin: 30px auto 0; 
    top: 50%; 
    left: 50%; 



margin-left: -155px; 
    margin-top: -700px;

這裏是我的CSS：

/*STYLES FOR CSS POPUP*/ 
#blanket { 
    background-color:#111; 
    opacity: 0.65; 
    *background:none; 
    position:absolute; 
    z-index: 9001; 
    top:0px; 
    left:0px; 
    width:100%; 
} 
#popUpDiv { 
    padding: 40px; 
    position:absolute; 
    background-color: #f3f3f3; 
    height:255px; 
    border:5px solid #000; 
    z-index: 9002; 
    -moz-border-radius: 10px; 
    -webkit-border-radius:10px; 
    border-radius: 10px; 
    margin-left: -155px; 
    margin-top: -700px; 
} 
#popUpDiv a {position:relative; top:0px; right:10px} 
/*END CSS POPUP*/

以下是我在我的PHP文件：

<!--POPUP--> 
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script> 

    <div id="blanket" style="display:none;"> 
    </div> 
    <div id="popUpDiv" style="display:none;"> 


     Pop Up content Here 


    </div> 
<!--/POPUP-->

來源

2013-02-06 myladeybugg

直到您爲popUpDiv提供位置，它將根據其在DOM中的位置呈現。嘗試給它一個頂部或左：樣式。此外，如果您希望它位於用戶指向的位置（不尋找，因爲無法檢查用戶的位置），您可以使用單擊事件位置來設置新div的位置） –

@Steve H.我會繼續嘗試給它一個頂部或左側：樣式。感謝您的建議。 – myladeybugg

有以上幾個方法可以做到你想要什麼在jscript中做，但凱迪拉克做到這一點的方式可能是模式彈出：http://www.script-tutorials.com/css3-modal-popups/。

來源

2013-02-06 23:00:55 RandomUs1r

謝謝你。這似乎是一個更簡單的方法來獲得彈出窗口。現在我只需要弄清楚如何將它合併到當前頁面中。 – myladeybugg

我相信你下載並將modal.css添加到你的網站的css目錄，然後看看示例中index.html中的彈出窗體＃1和窗體＃2。這不是太糟糕。這裏有人建議使用光標座標，這將把它放在用戶正在瀏覽的位置，但我個人並不理解，當我需要關閉該窗口時，它會中斷瀏覽體驗。更好的方法是將鼠標懸停在關閉時彈出窗口（如當您在Netflix上滾動電影時發生的情況）。 – RandomUs1r

我得到了它的所有工作和愛，但由於某種原因，它使我所有的嵌入式視頻不顯示。這只是視頻通常的死角。奇怪我知道，我會試着找出今天晚些時候導致衝突的原因。謝謝你給我看，我以前從來沒有聽說過。 – myladeybugg

職位：固定將解決您的問題。你對位置的使用：絕對是導致所有的戲劇。

#popUpDiv { 
    padding: 40px; 
    position:fixed; 
    background-color: #f3f3f3; 
    height:255px; 
    border:5px solid #000; 
    z-index: 9002; 
    -moz-border-radius: 10px; 
    -webkit-border-radius:10px; 
    border-radius: 10px; 
}

來源

2013-02-06 23:38:39 Brad

位置彈出div用戶正在尋找

回答

相關問題