我创建了一个带有两个按钮的自定义灯箱,用户必须单击一个按钮,然后它将提交我的表单。这是我的代码
function lightboxRefferal(){
//$('body').append('<div class="lightbox" id="lightboxBg"></div>');
$('#lightboxBg').height($('body').height());
$('.lightbox').show();
$('#lightboxContent').show();
$('#lightboxContent').css("position", "absolute");
$('#lightboxContent').css("top", Math.max(0, (($(window).height() - $('#lightboxContent').outerHeight()) / 2) + $(window).scrollTop()) + "px");
$('#lightboxContent').css("left", Math.max(0, (($(window).width() - $('#lightboxContent').outerWidth()) / 4) + $(window).scrollLeft()) + "px");
$('#referral_dropdown').change(function(){
if($(this).val() == 'Friend'){
$('.referral_friend').show();
} else{
$('.referral_friend').hide();
}
});
$('#lightboxSkip').click(function(){
$('#lightboxContent').hide();
$('.lightbox').hide();
$('#customers_referral').val('nodata');
$('form[name=create_account]').submit();
});
$('#lightboxContinue').click(function(){
$('#lightboxContent').hide();
$('.lightbox').hide();
if($('#referral_dropdown').val() == 'Friend'){
$('#customers_referral').val($('#referral_friend_dropdown').val());
}else{
$('#customers_referral').val($('#referral_dropdown').val());
}
$('form[name=create_account]').submit();
});
}
在所有浏览器中,这都能完美运行,出现灯箱,用户单击按钮并提交表单,问题是在 IE 9、8 和 7 中,灯箱没有出现并提交表单。我的代码有什么问题?如果我删除.submit();
灯箱出现。这是我的 HTML
<div id="lightboxMainContent">
<fieldset class="referral_lightbox">
<label class="inputLabel" for="referral_dropdown">How did you hear about us?</label>
<select id="referral_dropdown" name="referral_dropdown">
<option>Newspaper</option>
<option>Google</option>
<option>Friend</option>
</select>
</fieldset>
<fieldset class="referral_friend" style="display:none;">
<label class="inputLabel" for="referral_friend_dropdown">Referral:</label>
<?php
$referralFriendArray = zen_get_referral_info();
//$referralFriendArray = array("First Friend", "Second Friend", "Third Friend"); ?>
<select id="referral_friend_dropdown" name="referral_friend_dropdown">
<?php foreach($referralFriendArray as $row => $value){
echo '<option value="'.$row.'">' . $value . '</option>';
} ?>
</select>
<br class="clearBoth" />
</fieldset>
</div>
<div class="lightboxButtons">
<input type="button" name="lightboxSkip" id="lightboxSkip" value="Skip" style="width:100px;">
<input type="button" name="lightboxContinue" id="lightboxContinue" value="Continue" style="width:100px;">
</div>
</div>