Jquery Div居中

$(document).ready( function (){

// 打开
$( " #open " ).click( function (){


$(
" #showBox " ).show().css( " top " ,($(document).height() - 200 ) / 2).css("left",($(document).width()-400) / 2 );
});

// 关闭
$( " #close " ).click( function (){
$(
" #showBox " ).hide();
});

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以,以下是一个基于 jQuery 和 CSS 的居中提示框的示例代码: HTML 代码: ```html <div id="my-modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一个提示框</p> </div> </div> ``` CSS 代码: ```css /* 控制提示框的基本样式 */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; text-align: center; } /* 控制关闭按钮的样式 */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ``` jQuery 代码: ```javascript $(document).ready(function () { // 当用户点击某个按钮时显示提示框 $("#my-button").click(function () { $("#my-modal").css("display", "block"); }); // 当用户点击关闭按钮或者提示框外部时隐藏提示框 $(".close, .modal").click(function () { $("#my-modal").css("display", "none"); }); }); ``` 这段代码会在页面加载完成后绑定一个点击事件,当用户点击某个按钮时,会显示一个居中的提示框,提示框包含一个文本信息以及一个关闭按钮。当用户点击关闭按钮或者提示框外部时,提示框会被隐藏。你可以根据需要对这段代码进行修改和定制,以满足你的实际需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值