Jquery动态弹出窗口
本文关键字:窗口 动态 Jquery | 更新日期: 2023-09-27 17:50:58
我想做的是当我点击图像按钮时,一个弹出窗口必须出现在页面的中心。下面的代码掩码它,但不创建一个弹出窗口。还有一个问题,我想把动态文本框和复选框根据存储过程从sql。我应该写表记录在一个隐藏的领域,我怎么能把它转移到弹出窗口?由于
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.btncig').click(function (e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, .window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<td>
<asp:ImageButton ID="Imagecig" class="btncig" runat="server" ImageUrl="~/Images/selection.png" style="margin-left:13px" OnclientClick=""/>
css #mask
{
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window
{
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog
{
width:375px;
height:203px;
}
你没有说你正在为你的弹出使用哪个库。如果你使用的是jQuery UI,那么你的代码应该是这样的:
<script>
$(document).ready(function () {
$("#dialog").dialog({ // <-- Initialize your dialog/popup
autoOpen: false,
modal: true});
$('.btncig').click(function (e) {
e.preventDefault();
$("#dialog").dialog("open"); // <-- show your dialog/popup
});
});
</script>
你还需要一些html来放置你的字段,同样,你可以使用许多方法来动态创建内容,如ajax调用等所以你的html应该看起来像这样
<div id="#dialog">
<!-- Your dynamic content goes here -->
</div>
您需要确保在您的页面中通过CDN或本地引用jQuery和jQuery库。
希望对大家有所帮助