JQuery 彈出框定位實(shí)現(xiàn)方法
更新時(shí)間:2010年12月02日 12:52:13 作者:
這幾天一直在研究JQuery,確實(shí)很好用,有很多需求都是要彈出框,并且要定位,我這寫個(gè)簡單的例子,希望能分享給大家.
代碼:
//頁面代碼 (簡化)
<asp:TextBox ID="tbOperation2" runat="server" onclick="buttonclick($(this))"
CssClass="ui-button-icons-only" Text="按鈕"></asp:TextBox>
<div id="editdialog" title="Basic dialog">
<div>
<label onclick="clickEdit();" class="labelbutton">
Edit</label>
</div>
<div>
<label onclick="clickView();" class="labelbutton">
View</label>
</div>
<div>
<label onclick="clickBuild();" class="labelbutton">
Build</label>
</div>
</div>
<script type="text/javascript"> //頁面初始化的時(shí)候
var staticsignal;
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$(":input.ui-button-icons-only").button(); //更改textbox的樣式
});
</script>
<script type="text/javascript">
function buttonclick(e)
{
var offset=e.offset();//得到offset
var x=offset.left;
var y=offset.top;
$("#editdialog").dialog({
autoOpen:true,
draggable:true,
resizable:false,
position:[x,y+35], //設(shè)置坐標(biāo)
width:150
});
$(".ui-dialog-titlebar").hide();
$('a.ui-dialog-titlebar-close').hide();
staticsignal=e;
}
</script>
哈哈 其實(shí)很簡單 但是其中包含的東西比較多,具體請查閱資料~
復(fù)制代碼 代碼如下:
//頁面代碼 (簡化)
<asp:TextBox ID="tbOperation2" runat="server" onclick="buttonclick($(this))"
CssClass="ui-button-icons-only" Text="按鈕"></asp:TextBox>
<div id="editdialog" title="Basic dialog">
<div>
<label onclick="clickEdit();" class="labelbutton">
Edit</label>
</div>
<div>
<label onclick="clickView();" class="labelbutton">
View</label>
</div>
<div>
<label onclick="clickBuild();" class="labelbutton">
Build</label>
</div>
</div>
<script type="text/javascript"> //頁面初始化的時(shí)候
var staticsignal;
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$(":input.ui-button-icons-only").button(); //更改textbox的樣式
});
</script>
<script type="text/javascript">
function buttonclick(e)
{
var offset=e.offset();//得到offset
var x=offset.left;
var y=offset.top;
$("#editdialog").dialog({
autoOpen:true,
draggable:true,
resizable:false,
position:[x,y+35], //設(shè)置坐標(biāo)
width:150
});
$(".ui-dialog-titlebar").hide();
$('a.ui-dialog-titlebar-close').hide();
staticsignal=e;
}
</script>
哈哈 其實(shí)很簡單 但是其中包含的東西比較多,具體請查閱資料~
相關(guān)文章
jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效
這篇文章主要介紹了jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效,感興趣的小伙伴們可以參考一下2015-12-12
BootStrap iCheck插件全選與獲取value值的解決方法
這篇文章主要介紹了BootStrap iCheck插件全選與獲取value值的解決方法,解決方法其實(shí)很簡單,下面小編給大家分享下這方面的知識2016-08-08
得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個(gè)值,如何獲取到呢?一直困惑著我們,不過本文將為大家解開疑惑,感興趣的朋友可以了解下,或許本文對你有所幫助2013-02-02
jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果
超鏈接提示效果可以通過title實(shí)現(xiàn);圖片提示效果可以通過alt實(shí)現(xiàn),本文將會介紹下使用jquery實(shí)現(xiàn)超鏈接與圖片提示效果,感興趣的朋友們可以參考下哈2013-03-03
jquery教程限制文本框只能輸入數(shù)字和小數(shù)點(diǎn)示例分享
這篇文章主要介紹了JQuery限制文本框只能輸入數(shù)字和小數(shù)點(diǎn)的方法,大家參考使用吧2014-01-01
jquery實(shí)現(xiàn)多行文字圖片滾動效果示例代碼
多行文字圖片滾動效果的實(shí)現(xiàn)方法有很多,本例與大家分享的是jquery實(shí)現(xiàn)的具體步驟,很實(shí)用的2014-10-10
瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)
之前一直學(xué)習(xí),現(xiàn)在終于有時(shí)間來整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記,希望能留下痕跡,也希望能幫助到您2012-05-05

