[英]Custom dialog box not showing
我正在編寫一些javascript和HTML,並且想為用戶錯誤處理(而不是填寫字段)創建自定義對話框。 由於某些原因,當發生用戶錯誤時,框不會顯示。 我的Java腳本和html如下:
<script>$(document).ready(function(){
$('#submit_button').click(function(){
ShowCustomDialog();
});
});
function ShowCustomDialog()
{
var name = document.getElementById('name');
var address = document.getElementById('email');
var reason = document.getElementById('reason');
var message = document.getElementById('message');
if(name.value == ''){
ShowDialogBox('Warning','Enter your name','Ok','', 'GoToAssetList',null);
return false;
}
if(email.value == ''){
ShowDialogBox('Warning','Enter your email.','Ok','', 'GoToAssetList',null);
return false;
}
if(reason.value == ''){
ShowDialogBox('Warning','Select a reason','Ok','', 'GoToAssetList',null);
return false;
}
if(message.value == ''){
ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null);
return false;
}
}
function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
var btn1css;
var btn2css;
if (btn1text == '') {
btn1css = "hidecss";
} else {
btn1css = "showcss";
}
if (btn2text == '') {
btn2css = "hidecss";
} else {
btn2css = "showcss";
}
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'scale', duration: 400 },
buttons: [
{
text: btn1text,
"class": btn1css,
click: function () {
$("#dialog").dialog('close');
}
},
{
text: btn2text,
"class": btn2css,
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}</script><form method="post" action="MAILTO:me" enctype="text/plain" onsubmit=" return ShowCustomDialog()">
<div class="row">
<label>Your Name:</label>
<input type="text" id="name" name="name" size="20" />
</div>
<div class="row">
<label>Your E-mail:</label>
<input type="text" id="email" name="email" size="20" />
</div>
<div class="row">
<label>Reason for Report:</label>
<select id="reason" name="reason" />
<option value="">Please Select...</option>
<option value="bug">Bug Report</option>
<option value="feature">Feature</option>
<option value="tech_support">Technical Support</option>
<option value="other">Other...</option>
</select>
</div>
<div class="row">
<label>Your Message:</label>
<textarea type="text" id="message" name="message" rows="7" cols="30"></textarea>
</div>
<input id="submit_button" type="submit" value="Send E-mail" />
<div id="dialog" title="Alert message" style="display: none">
<div class="ui-dialog-content ui-widget-content">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
<label id="lblMessage">
</label>
</p>
</div>
</div>
</form>
我將不勝感激
當按鈕上有單擊事件時,必須返回false或使用e.preventDefault()。 否則,該按鈕將提交頁面,並且您將永遠不會看到對話框。
例如
$(document).ready(function(){
$('#submit_button').click(function(e){
if(!ShowCustomDialog()) {
e.preventDefault()
}
});
});
在我的示例中,您應該在ShowCustomDialog函數中添加return true。
function ShowCustomDialog()
{
...
if(message.value == ''){
ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null);
return false;
}
return true;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.