jQuery UI模式对话框阻止单击事件？
[英]jQuery UI modal dialog blocks clicking event?
问题描述
单击按钮以显示弹出窗口确实有问题。
在我的layout.jspx中，我有以下内容：
<div class="menuBtn">
<div class="search">
<span></span>
</div>
</div>
</header>
<tiles:insertAttribute name="body" />
</div>
<!-- USERINFO POPUP -->
<div class="popup accDetail user" id="userPopup" style="display: none;">
<div class="userInfo">
<img src="${img_user}" width="60" height="60"></img>
<div>
<p class="department"><security:authentication property="securityUser.department"/></p>
<p class="name"><security:authentication property="securityUser.userName"/></p>
<p class="email"><security:authentication property="securityUser.email"/></p>
</div>
<div class="btn clear cen floatNone">
<a class='blank' href="${url_logout}">Log Out</a>
</div>
</div>
</div>
用户单击图标时，将显示userPopup。
实际上在其他页面上也能很好地工作。 （在页面的右上角）
然后在我的一个jsp中，我确实有以下内容：
的HTML
<div class="mainarea">
<div class="dataTitle">
<h2 class='h2Title'>Annual Leave</h2>
</div>
<div class="searchParentOne">
<div>
<input type="image" class="addNewLetter" src="/ias/resources/images/leave.png"
style="height:128px;width:256px;">
<p class="temp-test" style="display:none;"><security:authentication property='securityUser.fullName'/></p>
</div>
</div>
</div>
<div class="popup accDetail" id="letterDialog" title="Leave Application" style="display: none;">
<div class="popupmainarea">
<div class="clear bttn" id="divSmallDate">
<div class="bttn rig floatNone">
<button type="button" class="ui-lngbutton edit_ui selectLine">Line</button>
<button type="button" class="ui-button up_ui btnSendDoc" style="display:none;">Submit</button>
<button type="button" class="ui-button cancel_ui btnCancelCon">Close</button>
</div>
</div>
<form id="formAddNewDoc" enctype="multipart/form-data">
<div class="data">
<div>
<p align="center"><font size="6">Annual Leave</font></p>
</div>
<table class="custbltwo">
<colgroup>
<col style="width: 40%;">
<col style="width: 60%;">
</colgroup>
<tbody>
<tr>
<td class="tbHead">Document No.</td>
<td class="tbContent" style="border-style: solid hidden solid solid;"><p id="documentId">Mobile C&C Cambodia-XX-XXXX</p></td>
</tr>
<tr>
<td class="tbHead">Department</td>
<td class="tbContent" style="border-style: solid hidden solid solid;"><p></p>
<input type="hidden" name="docDepartment" id="docDepartment"/>
</td>
</tr>
<tr>
<td class="tbHead">Approval Date</td>
<td class="tbContent" style="border-style: solid hidden solid solid;"><p id="docDisplayDate" class="today"></p>
<input type="hidden" name="docHideCDate" id="docHideCDate"/>
</td>
</tr>
<tr>
<td class="tbHead">Writer</td>
<td class="tbContent" style="border-style: solid hidden solid solid;">
<p class="temp-test">
<security:authentication property='securityUser.fullName'/>
</p>
<input type="hidden" name="docEmployee" id="docEmployee" value="<security:authentication property="securityUser.fullName"/>"/>
</td>
</tr>
</tbody>
</table>
<table class="custblthree">
<colgroup>
<col style="width: 12%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
<col style="width: 17.6%;">
</colgroup>
<tbody>
<tr>
<td class="tbHead" rowspan="2">Approval<strong class="required">*</strong>
<input type="hidden" name="docApproval" id="docApproval">
</td>
<td class="tbContent" align="center" id="clickclick1"><input type="text" readonly="readonly" name="docApp0" id="docApp0" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick2"><input type="text" readonly="readonly" name="docApp1" id="docApp1" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick3"><input type="text" readonly="readonly" name="docApp2" id="docApp2" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick4"><input type="text" readonly="readonly" name="docApp3" id="docApp3" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick5"><input type="text" readonly="readonly" name="docApp4" id="docApp4" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbContentTwo" align="center" id="clickclick6"><img id="docAppNumImg0"></img></td>
<td class="tbContentTwo" align="center" id="clickclick7"><img id="docAppNumImg1"></img></td>
<td class="tbContentTwo" align="center" id="clickclick8"><img id="docAppNumImg2"></img></td>
<td class="tbContentTwo" align="center" id="clickclick9"><img id="docAppNumImg3"></img></td>
<td class="tbContentTwo" align="center" id="clickclick10"><img id="docAppNumImg4"></img>
<input type="hidden" readonly="readonly" name="docAppNum0" id="docAppNum0" value="0">
<input type="hidden" readonly="readonly" name="docAppNum1" id="docAppNum1" value="0">
<input type="hidden" readonly="readonly" name="docAppNum2" id="docAppNum2" value="0">
<input type="hidden" readonly="readonly" name="docAppNum3" id="docAppNum3" value="0">
<input type="hidden" readonly="readonly" name="docAppNum4" id="docAppNum4" value="0">
</td>
</tr>
<tr>
<td class="tbHead" rowspan="2">Agreement
<input type="hidden" name="docSettlement[]" id="docSettlement">
</td>
<td class="tbContent" align="center" id="clickclick11"><input type="text" readonly="readonly" name="docAgg0" id="docAgg0" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick12"><input type="text" readonly="readonly" name="docAgg1" id="docAgg1" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick13"><input type="text" readonly="readonly" name="docAgg2" id="docAgg2" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick14"><input type="text" readonly="readonly" name="docAgg3" id="docAgg3" style="border:0; text-align:center;"></td>
<td class="tbContent" align="center" id="clickclick15"><input type="text" readonly="readonly" name="docAgg4" id="docAgg4" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbContentTwo" align="center" id="clickclick16"><img id="docAggNumImg0"></img></td>
<td class="tbContentTwo" align="center" id="clickclick17"><img id="docAggNumImg1"></img></td>
<td class="tbContentTwo" align="center" id="clickclick18"><img id="docAggNumImg2"></img></td>
<td class="tbContentTwo" align="center" id="clickclick19"><img id="docAggNumImg3"></img></td>
<td class="tbContentTwo" align="center" id="clickclick20"><img id="docAggNumImg4"></img>
<input type="hidden" readonly="readonly" name="docAggNum0" id="docAggNum0" value="0">
<input type="hidden" readonly="readonly" name="docAggNum1" id="docAggNum1" value="0">
<input type="hidden" readonly="readonly" name="docAggNum2" id="docAggNum2" value="0">
<input type="hidden" readonly="readonly" name="docAggNum3" id="docAggNum3" value="0">
<input type="hidden" readonly="readonly" name="docAggNum4" id="docAggNum4" value="0">
</td>
</tr>
</tbody>
</table>
<table class="custbleone">
<colgroup>
<col style="width: 10.8%;">
<col style="width: 14.5%;">
<col style="width: 4%;">
<col style="width: 14.5%;">
<col style="width: 56.2%;">
</colgroup>
<tbody>
<tr>
<td class="tbHead" style="border-style: hidden solid solid solid;">Reference</td>
<td class="tbContent" id="clickclick21" colspan="4" valign="middle" style="border-style: hidden solid solid solid;">
<input type="text" readonly="readonly" name="docReference[]" id="docReference" placeholder="Reference"></td>
</tr>
<tr>
<td class="tbHead">Implement<strong class="required">*</strong></td>
<td class="tbContent" colspan="4" valign="middle">
<input type="text" readonly="readonly" name="docEnforcement" id="docEnforcement" style="border:0;"value="<security:authentication property="securityUser.fullName"/>"/></td>
</tr>
<tr>
<td class="tbHead">Period<strong class="required">*</strong></td>
<td class="tbContent" valign="middle" style="border-style: solid hidden solid solid;"><input type="text" readonly="readonly" class='ihalf dateOne' id="sDate" name="sDate"
placeholder="2016-01-01" style="display:inline;"><input type="hidden" name="docStartDate" id="docStartDate"></td>
<td class="tbContent" style="border-style: solid hidden solid hidden;"><p class="ptilde" style="display:inline;">  ~</p></td>
<td class="tbContent" valign="middle" style="border-style: solid hidden solid hidden;"><input type="text" readonly="readonly" class='ihalf dateTwo' id="eDate" name="eDate" placeholder="2016-01-01" style="display:inline;">
<input type="hidden" name="docEndDate" id="docEndDate"></td>
<td class="tbContent" style="border-style: solid solid solid hidden;"></td>
</tr>
<tr>
<td class="tbHead" style="border-style: solid solid hidden solid;">Title<strong class="required">*</strong></td>
<td class="tbContent" valign="middle" colspan="4" style="border-style: solid solid hidden solid;"><input type="text" id="docTitle" name="docTitle" placeholder="Title" maxlength="80"/></td>
</tr>
</tbody>
</table>
<table class="custbleone">
<colgroup>
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td class="tbContent" style="text-align:center;">Annual Info Year</td>
<td class="tbContent" style="text-align:center;">Total Annual Leave</td>
<td class="tbContent" style="text-align:center;">Used Annual Leave</td>
<td class="tbContent" style="text-align:center;">Remain Annual Leave</td>
<td class="tbContent" style="text-align:center;">Request Annual Leave<strong class="required">*</strong></td>
</tr>
<tr>
<td class="tbContent"><input type="number" readonly="readonly" name="docAnnualYear" id="docAnnualYear" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" readonly="readonly" id="docTotalLeave" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" readonly="readonly" id="docUsedLeave" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" readonly="readonly" name="docRemainLeave" id="docRemainLeave" style="border:0; text-align:center;"></td>
<td class="tbContent"><input type="number" name="docRequestLeave" id="docRequestLeave" step="0.5" style="text-align:center;"></td>
<!-- step attribute does not work -->
</tr>
</tbody>
</table>
<table class="custbleone">
<tbody>
<tr>
<td class="tbContentTwo" valign="top" style="border-style: hidden solid solid solid;">
<textarea class="ckeditor" id="docText" name="docText"></textarea></td>
</tr>
</tbody>
</table>
<table class="custbleone">
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 70%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr>
<td class="tbContent" rowspan="3" valign="middle" style="border-style: hidden solid solid solid;">
Attachment</td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid solid;">
<input type="file" id="docFile1" name="docFile1" size="50" style="width:85px;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<input type="text" readonly="readonly" id="test1" class="test1" style="border:0;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<button type="button" id="clearDocFile1" style="display:none;">Delete</button></td>
</tr>
<tr>
<td class="tbContent" valign="middle" style="border-style: hidden solid hidden solid;">
<input type="file" id="docFile2" name="docFile2" size="50" style="display:none; width:85px;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<input type="text" readonly="readonly" id="test2" class="test2" style="border:0;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<button type="button" id="clearDocFile2" style="display:none;">Delete</button></td>
</tr>
<tr>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid solid;">
<input type="file" id="docFile3" name="docFile3" size="50" style="display:none; width:85px;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<input type="text" readonly="readonly" id="test3" class="test3" style="border:0;"/></td>
<td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;">
<button type="button" id="clearDocFile3" style="display:none;">Delete</button></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currentUser" id="currentUser" value="<security:authentication property="securityUser.fullName"/>"/>
<input type="hidden" name="docDisplayAllSum[]" id="docDisplayAllSet">
<input type="hidden" name="docDisplayApp[]" id="docDisplayApp">
<input type="hidden" name="docDisplaySet[]" id="docDisplaySet">
<input type="hidden" name="docDisplayAllApp[]" id="docDisplayAllApp">
<input type="hidden" name="docSum[]" id="docSum">
<input type="hidden" name="docDisplayAllSum[]" id="docDisplayAllSum">
<input type="hidden" name="docDisplaySum[]" id="docDisplaySum">
<input type="hidden" name="docAgreeType[]" id="docAgreeType">
<input type="hidden" value="Annual Leave" id="docType" name="docType"/>
<input type="hidden" value="" id="docAttachment" name="docAttachment"/>
<input type="hidden" value="" id="docDone" name="docDone"/>
<input type="hidden" value="Report" id="docStatus" name="docStatus"/>
<input type="hidden" value="false" id="docRejected" name="docRejected"/>
<input type="hidden" name="fileName1" id="fileName1"/>
<input type="hidden" name="fileName2" id="fileName2"/>
<input type="hidden" name="fileName3" id="fileName3"/>
</div>
</form>
</div>
的JavaScript
$(".addNewLetter").on("click",function(e){
$("#letterDialog").dialog("open");
$(".floatNone :button").blur();
$('.today').text(parseDatetoString(new Date(),CONSTANT.YYYYMMDDHHMMSSFORMAT));
var currrentRemain = parseFloat($("#docRemainLeave").val());
if (currrentRemain <= 0) {
$(".btnSendDoc").hide();
} else {
$(".btnSendDoc").show();
}
$("#formAddNewDoc").validate({
onclick : false,
ignore : [],
onkeyup : function(element) {
return true;
},
onfocus : true,
rules : {
docTitle : {required : true, maxlength : 80},
docStartDate : {required : true},
docEndDate : {required : true},
docApproval : {required : true},
docEnforcement : {required : true},
docRequestLeave : {required : true, min: 0.5, max: currrentRemain}
},
invalidHandler : function(e, validator) {
if (!validator.numberOfInvalids()) {
return;
}
$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top -30
}, 1000, function(){
$(validator.errorList[0].element).focus();
});
}
});
});
initDialog : function(){
$( "#letterDialog" ).dialog({
autoOpen: false,
modal: true,
width : 1000,
resizable: false,
close: function( event, ui ) {
$(this).dialog("close");
}
});
}
在下一页中，如果单击“请假申请”图标，则会显示年假弹出窗口。
但是，当我单击右上角的配置文件图标时，userPopup不会显示。
看起来由于jQuery UI模式对话框，单击事件没有触发。
我该如何解决？
我检查了这篇文章 ，但不确定setTimeout是否正确，这是使用的正确方法。
请给我一些建议。
编辑 ：
忘了显示initDialog，所以我只在JavaScript部分下添加了它。
我将模式选项设置为false，但只删除了模式选项，但是单击该图标仍不会触发。
1 个解决方案
解决方案1
0 2016-01-29 08:58:20
不确定我是否足够了解。 似乎弹出窗口显示为代码$("#letterDialog").dialog("open"); 是一个模式对话框。
您是否尝试将模式选项设置为false重试？
类似于下面的代码： $("#letterDialog").dialog('option', 'modal', false).dialog("open")
停止并稍后在jquery ui模式对话框中说服javascript事件
[英]stop and later persue javascript event in jquery ui modal dialog
如何通过单击框所覆盖的区域外单击关闭jQuery UI模式对话框？
[英]How to close a jQuery UI modal dialog by clicking outside the area covered by the box?
如何通过使用jQuery UI在函数中单击外部来关闭非模式对话框
[英]How to close the non-modal dialog box by clicking outside in function using jquery ui
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.