使表格形式出現在內容頂部
[英]Make a form-in-a-div appear on top of content
問題描述
我確定這已經被問過了，但是我的Google-fu無法找到答案。
我有一個內容頁面，我想要它，因此當用戶按下鏈接或按鈕時，內容頂部會出現一個表單。 填寫並提交后，它將傳遞給ajax進行處理。
我確信在我在網站上看到它之前，它已經解決了。 有沒有簡單的方法可以做到這一點，例如jquery插件或其他javascript API？
還是我必須手動在div中編寫表格，在CSS中將其與z-index疊加並隱藏。 然后在調用表單時會出現該表單嗎？
解決這個問題的最簡單方法是什么？ 非常感謝
5 個解決方案
解決方案1
3 已采納 2010-07-30 13:27:45
聽起來您正在尋找一個模式彈出窗口，該彈出窗口通過HTTP請求從服務器獲取表單。
在線上有很多示例。 查看jQuery ThickBox： http ： //jquery.com/demo/thickbox/
更好的是，這是一個包含30多個示例的頁面： http : //www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/
解決方案2
1 2010-07-30 13:25:14
您可以看一下FancyBox插件（最初用於顯示圖片，但也可以用於表格）。
請參閱此鏈接： http : //fancybox.net/blog ，在頁面中間查找“ 5.顯示登錄表單”示例。
解決方案3
1 2010-07-30 13:25:22
嘗試使用任何出色的jQuery“ lightbox”類型插件，這些插件都允許Ajax內容。
只需搜索“ jQuery lightbox”。
解決方案4
1 2010-07-30 13:38:46
您可以編寫一些CSS來在絕對位置的頂部顯示表單。 就像是：
#inputForm {
position: absolute;
top: 10px;
left: 100px;
width: 300px;
height: 200ps;
}
然后使用以下標記：
<html>
<head>
</head>
<body>
<div>
Click to login <input type="button" id="btnLogin" />
</div>
<div id="inputForm" style="display:none;">
<!-- your form controls -->
<input type="button" id="btnSubmit" />
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#btnLogin').click(function() {
$('#inputForm').show();
});
$('#btnSubmit').click(function() {
$('#inputForm').hide();
// collect form data
// make your AJAX request
});
});
</script>
</body>
</html>
解決方案5
1 2010-07-30 13:39:22
我同意其他人的意見：您想要類似[thick | light | color | fancy | ...]-box之類的東西。 因此，提及我最喜歡的解決方案： http : //nyromodal.nyrodev.com/#demos
好消息是，您可以使其表現像iframe ，只需將url傳遞給要顯示的表單即可。
如何使 div 部分顯示在另一個方形 div 的頂部
[英]How to make a div appear partially overlayed on top of another square div
js滑塊試圖將當前幻燈片的div出現在頂部的問題
[英]Issue with a js slider trying to make the current slides' div appear on top
不是我 div 的內容似乎試圖使用某些東西來使它出現
[英]Not the content of my div appears to try to use something to make it appear
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.