YUI Overlay Widget是你在找什麼?
我粘貼了一個示例頁面,演示了它的工作原理。如果這或多或少是你想要的,那麼你應該可以擁有一個函數,在表單提交後,激活覆蓋。你將不得不查找API來詳細瞭解一下 - http://developer.yahoo.com/yui/3/overlay/
而且,YUI具有自定義事件(但我不知道很多關於他們):http://developer.yahoo.com/yui/3/event/
<body>
<div id="myContent">
<div class="yui3-widget-hd">Overlay Header</div>
<div class="yui3-widget-bd">Overlay Body</div>
<div class="yui3-widget-ft">Overlay Footer</div>
</div>
<style>
#myContent
{
background-color:blue;
color:red;
}
</style>
<div id="parentNode"></div>
<style>
#parentNode
{
color:red;
background-color:blue;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare phare
Etiam porttitor consectetur sagittis. Suspendisse libero lorem, porta ut tincidu
Etiam dapibus urna ut mauris semper varius. Vestibulum auctor tincidunt urna, id
Nam posuere rutrum sem porttitor pretium. Suspendisse pulvinar sodales viverra.
Donec eleifend nisi nec mauris vestibulum a placerat sapien molestie. In tempus
Proin tincidunt feugiat accumsan. Fusce vel sagittis tellus. Quisque vitae conse
Nam vestibulum, ipsum suscipit dignissim feugiat, nisl lectus sodales felis, nec
Quisque venenatis, nulla sit amet sodales semper, turpis nulla viverra lectus, a
Phasellus euismod ligula at lectus interdum a malesuada ante lacinia. Nam venena
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
Donec ut eros lorem, eget bibendum neque. Aliquam semper, tortor sed euismod luc
Nullam volutpat adipiscing congue. Aliquam fringilla diam quis quam pharetra tin
Etiam a tortor at justo sodales mattis. Praesent porttitor enim ac sem ultrices
Nam condimentum, ante non adipiscing tristique, magna felis semper arcu, eu temp
Morbi ut enim eget urna ornare elementum ac a ligula. Vestibulum commodo quam se
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<script>
YUI().use('overlay', function(Y) {
var overlay = new Y.Overlay({
srcNode: '#myContent',
centered: true
});
//overlay.render();
overlay.render('#parentNode');
});
</script>
</body>