我遇到了一个问题,即使没有对代码进行任何更改,也会出现在Web服务器上。
在Default.aspx上使用Modal Open函数点击“安排约会”: http://www.davincispainting.com/
此问题发生在虚拟目录博客上,但通常在网站上传后的几天内发生。
这个模态在博客中工作了一段时间 然后,由于没有明显的原因,一个Hashtag“#”被嵌入到URL中,这使得Modal弹出窗口无法使用。
http://www.davincispainting.com/blog
我已经清除了Casche并检查了Chrome,Firefox和IE。 有没有人有线索?
如果您注意到,此#是标记的一部分。如果我把它拿出来,链接就不起作用了。
博客使用Razor Pages:
<div id="contact-button">
<div id='contact-form'>
<a href="#" class="contact"></a>
</div>
</div>
<div id='modal-contact-form' style='display: none'>
<div class='contact-top'>
</div>
<div class='contact-content'>
<h1 class='contact-title'>Send us a Message:</h1>
<div class='contact-loading' style='display: none'>
</div>
<div class='contact-message' style='display: none'>
</div>
<form action='Contact.aspx' style='display: none'>
<label for='contact-name'>
*Name:</label>
<input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
<label for='contact-email'>
*Email:</label>
<input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
<label for='contact-subject'>
Subject:</label>
<input type='text' id='contact-subject' class='contact-input' name='subject' value='' tabindex='1003' />
<label for='contact-message'>
*Message:</label>
<textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4' tabindex='1004'></textarea>
<br />
<label> </label>
<input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' />
<span class='contact-cc'>Send me a copy</span>
<br style="clear:both; line-height:0px;" />
<label> </label>
<button type='submit' class='contact-send contact-button' tabindex='1006'>
Send</button>
<button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>
Cancel</button>
<br />
<input type="hidden" id="tokenValue" name="tokenValue" value="<%= new MailService().GetToken(0) %>" />
</form>
</div>
<div class='contact-bottom'><a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>
/*
* SimpleModal Contact Form
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: contact.js 254 2010-07-23 05:14:44Z emartin24 $
*/
jQuery(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.contact, a.contact').click(function (e) {
e.preventDefault();
// create a modal dialog with the data
$('#modal-contact-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
maxHeight: 390,
maxWidth: 62,
minHeight: 62,
minWidth: 62,
position: [132, 513],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
},
open: function (dialog) {
// add padding to the buttons in firefox/mozilla
if ($.browser.mozilla) {
$('#contact-container .contact-button').css({
'padding-bottom': '2px'
});
}
// input field font size
if ($.browser.safari) {
$('#contact-container .contact-input').css({
'font-size': '.9em'
});
}
// dynamically determine height
var h = 280;
if ($('#contact-subject').length) {
h += 26;
}
if ($('#contact-cc').length) {
h += 22;
}
var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Loading...');
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#contact-container .contact-content').animate({
height: h
}, function () {
$("#contact-form-container").css("display", "inline");
$('#contact-container .contact-title').html(title);
$('#contact-container form').fadeIn(200, function () {
$('#contact-container #contact-name').focus();
$('#contact-container .contact-cc').click(function () {
var cc = $('#contact-container #contact-cc');
cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
});
// fix png's for IE 6
if ($.browser.msie && $.browser.version < 7) {
$('#contact-container .contact-button').each(function () {
if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
var src = RegExp.$1;
$(this).css({
backgroundImage: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
});
}
});
}
});
});
});
});
});
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
var form = $('#contact-container form');
// validate form
if (contact.validate()) {
var msg = $('#contact-container .contact-message');
msg.fadeOut(function () {
msg.removeClass('contact-error').empty();
});
$('#contact-container .contact-title').html('Sending...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: '80px'
}, function () {
var uname = $('#contact-container #contact-name').val();
var email = $('#contact-container #contact-email').val();
var cntx = $('#contact-container #contact-message').val();
var docc = "false";
if ($('#contact-container #contact-cc').is(':checked')) {
docc = "true";
}
$.ajax({
url: "blog/api/Blogs.asmx/SendMail",
data: "{'uname':'" + uname + "', 'email':'" + email + "','cntx':'" + cntx + "','docc':'" + docc + "'}",
type: "POST",
contentType: "application/json",
success: function (msg) {
//contact.close(dialog);
$('#contact-container .contact-loading').fadeOut(200, function () {
$('#contact-container .contact-title').html('Thank you!');
msg.html(data).fadeIn(200);
setTimeout(function () {
contact.close(dialog);
}, 1500);
});
}
});
contact.close(dialog);
});
}
else {
if ($('#contact-container .contact-message:visible').length > 0) {
var msg = $('#contact-container .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#contact-container .contact-message').animate({
height: '30px'
}, contact.showError);
}
}
});
},
close: function (dialog) {
$("#contact-form-container").css("display", "none");
$('#contact-container .contact-message').fadeOut();
$('#contact-container .contact-title').html('Goodbye...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: 40
}, function () {
dialog.data.fadeOut(200, function () {
dialog.container.fadeOut(200, function () {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
});
});
});
},
error: function (xhr) {
alert(xhr.statusText);
},
validate: function () {
contact.message = '';
if (!$('#contact-container #contact-name').val()) {
contact.message += 'Name is required. ';
}
var email = $('#contact-container #contact-email').val();
if (!email) {
contact.message += 'Email is required. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'Email is invalid. ';
}
}
if (!$('#contact-container #contact-message').val()) {
contact.message += 'Message is required.';
}
if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validateEmail: function (email) {
var at = email.lastIndexOf("@");
// Make sure the at (@) sybmol exists and
// it is not the first or last character
if (at < 1 || (at + 1) === email.length)
return false;
// Make sure there aren't multiple periods together
if (/(\.{2,})/.test(email))
return false;
// Break up the local and domain portions
var local = email.substring(0, at);
var domain = email.substring(at + 1);
// Check lengths
if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
return false;
// Make sure local and domain don't start with or end with a period
if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
return false;
// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!/^"(.+)"$/.test(local)) {
// It's a dot-string address...check for valid characters
if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
return false;
}
// Make sure domain contains only valid characters and at least one period
if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
return false;
return true;
},
showError: function () {
$('#contact-container .contact-message')
.html($('<div class="contact-error"></div>').append(contact.message))
.fadeIn(200);
}
};
contact.init();
});
答案 0 :(得分:1)
尝试使用此帖子中的解决方案:jQuery simplemodal closeHTML issue
同样可能的解决方案尝试如下:
<a href='#' title='Close' class='modal-close' onclick='return false;'>x</a>
修改强>
我猜答案要容易得多。没有处理点击的脚本。你说应该有一些contact.js
脚本。但是我的载入中没有这样的脚本:
答案 1 :(得分:0)
if you want to remove # then please remove it from href od <a> tag. Just because
of that you are getting error.
$('#modal-contact-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
maxHeight: 390,
maxWidth: 62,
minHeight: 62,
minWidth: 62,
position: [132, 513],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
我想只是因为你得到了#。删除它或使用其他链接
答案 2 :(得分:0)
诊断
当我使用Chrome开发工具打开博客时,我注意到在页面加载过程中出现了多个错误,我相信这是您的问题。 href="#"
与问题没有任何关系,它可以使用或不使用它,因为你使用jQuery事件来触发模态。
修复
/blog/Scripts/Header/js文件中似乎存在语法错误。看起来您在此文件中有一个已经缩小版本的jQuery,其中包含语法错误。您目前正在尝试使用版本~1.5。尝试使用valid copy of jQuery替换第39行。
如果这不起作用,您可以尝试在依赖它的任何其他脚本之前从CDN加载jQuery。
希望有所帮助, -Joe