一下为两个弹出框的样子,当然这个根据自己的需求设置样式
先引入下面js
<script type="text/javascript"src="http://image.tianji.com/js/jqueryUI.js">
</script>
此为jquery一个控件
<div id="showBoxId" style="display:none;border:1px solid #7EABCD;">
<div id="titleId" style="background:#BED5FF;padding:15px;font-weight:bold;TEXT-ALIGN: left;"><fmt:message key="label.group.core.membermange.rejectreason"/></div>
<textarea id="reasonId" style="width: 280px; height: 80px;overflow-x:hidden;overflow-y:hidden"></textarea>
<input type="button" id="refuseYes" value="<fmt:message key="button.group.core.membermange.submit"/>"/><input type="button" id="refuseNo" value="<fmt:message key="button.group.core.membermange.cancel"/>"/>
</div>
<div id="blacklistConfirmBox" style="display:none;border:1px solid #7EABCD;">
<div style="background:#BED5FF;padding:15px;font-weight:bold;TEXT-ALIGN: left;"><fmt:message key="message.group.core.membermange.blacklist.confirm"/></div>
<input type="button" id="blacklistConfirm" value="<fmt:message key="button.group.core.membermange.submit"/>"/><input type="button" id="blacklistCancel" value="<fmt:message key="button.group.core.membermange.cancel"/>"/>
</div>
两个对话框有了
就出发什么显示着两个对话框,并让背景置灰
<script>
$("#refuseYes").bind("click",function(){
$("#_eventId").val("ban");
if($("#reasonId").val()==""){
alert("<fmt:message key="error.group.core.membermanage.reason.required"/>");
}else{
$("#reason").val($("#reasonId").val());
$("#manageForm").submit();
$.unblockUI();
$("#reason").val("");
$("#reasonId").val("");
return false;
}
});
$("#refuseNo").bind("click",function() {
$.unblockUI();
$("#reasonId").val("");
return false;
});
$("#ban").click(function(){
if(checked()){
$.blockUI({ overlayCSS:{backgroundColor: "#EFEFEF"}, message: $("#showBoxId")});
//$("#_eventId").val("ban");
//$("#manageForm").submit();
return false;
}
});
$("#blacklistConfirm").bind("click",function(){
$("#_eventId").val("blacklist");
$("#manageForm").submit();
$.unblockUI();
$("#reason").val("");
$("#reasonId").val("");
return false;
});
$("#blacklistCancel").bind("click",function() {
$.unblockUI();
$("#reasonId").val("");
return false;
});
$("#blacklist").click(function(){
if(checked()){
$.blockUI({ overlayCSS:{backgroundColor: "#EFEFEF"}, message: $("#blacklistConfirmBox")});
//$("#_eventId").val("blacklist");
//$("#manageForm").submit();
return false;
}
});
$("#selectAll").change( function() {
$(".memberIdBox").attr("checked", $(this).attr("checked")); //全选钮
});
$("#grantAdminship").click(function(){
if(checked()){
$("#_eventId").val("grantAdminship");
$("#manageForm").submit();
return false;
}
});
function checked(){
var isChecked = false;
$("input[@type=checkbox]",".memberMngTbale").each(
function(){
if($(this).attr("checked")){
isChecked=true;
return;
}
})
if(!isChecked){
alert("<fmt:message key="error.group.core.membermanage.memberids.required"/>");
}
return isChecked;
} //判断是否有选中的元素,如果没有的话,不允许提交
</script>
分享到:
相关推荐
首先,理解jQuery弹出框的基本概念。在网页交互中,弹出框通常用于提示信息、获取用户输入或者展示详细内容。常见的弹出框有警告对话框、确认对话框和自定义模态窗口。jQuery本身并不直接提供弹出框功能,但可以通过...
总结来说,创建好看的jQuery弹出框样式涉及HTML结构设计、CSS样式定制以及jQuery事件处理。通过这些技术,我们可以实现交互性强且视觉效果出色的弹出框,从而提高网站或应用的用户满意度。实践过程中,不断调整和...
在本项目中,"jquery弹出框"指的是利用jQuery实现的一种交互式弹出层效果,类似于QQ聊天窗口中的弹出对话框。这种弹出层允许用户自定义关闭机制,并可以调整大小、改变位置,同时附带有遮罩效果,增强了用户体验。 ...
**jQuery弹出框详解** 在Web开发中,用户交互是至关重要的,而弹出框(Modal)作为一种常见的交互方式,可以有效地吸引用户的注意力并提供额外的信息或操作选项。jQuery库,作为JavaScript的一个强大工具,提供了...
jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框
本文将详细解析如何利用HTML、CSS和jQuery来创建一个自定义的弹出框,即"自定义jquery弹出框demo1"。 首先,我们需要理解HTML结构。在创建弹出框时,我们通常会有一个隐藏的div元素,这个div包含了弹出框的所有内容...
《jQuery弹出框技术详解与应用实践》 在网页开发中,弹出框是一种常见的交互设计元素,用于向用户展示信息、确认操作或接收输入。jQuery,作为一个强大的JavaScript库,提供了丰富的API和插件,使得创建弹出框变得...
"Jquery 弹出框样式"是jQuery的一个重要应用,涉及到用户交互和界面反馈的设计。弹出框通常用于显示警告、确认信息或者提供更详细的交互内容,而其样式则直接影响到用户体验。 弹出框主要有以下几种类型: 1. **...
而“jQuery弹出框插件”则是基于jQuery库开发的一类扩展,用于创建各种类型的对话框或提示框,如警告、确认、信息提示以及模态窗口等。这些插件通常具有高度自定义性,能够帮助开发者快速实现用户界面的互动功能,...
### 知识点一:jQuery弹出框的基本实现 jQuery弹出框是Web开发中常用的界面组件,通常用于显示额外的信息或用户操作的确认。基本实现一般涉及以下步骤: 1. **HTML结构定义**:首先需要定义弹出框的HTML结构。这...
在网页开发中,jQuery弹出框插件是增强用户体验、展示信息或进行交互的重要工具。这些插件使得创建对话框、提示框、警告框、模态框等变得更加简单。以下是对给定标题和描述中涉及的jQuery弹出框插件的详细解释: 1....
《jQuery弹出框插件——JBox详解及应用》 在网页开发中,为了提供更好的用户体验,我们常常需要使用弹出框来展示信息或者进行交互操作。jQuery作为一款广泛使用的JavaScript库,拥有丰富的插件资源,其中JBox是一款...