JQuery弹出窗体对话框在Firefox中不起作用，但在Chrome和IE中可以正常工作

我的代码如下适用于Chrome和IE，但不适用于Firefox。我正在使用JQuery打开一个弹出窗口单击错误的数据？发送电子邮件。在Chrome和IE中，它确实打开了弹出的div窗体，但在Firefox中却没有。请帮助。非常感谢。JQuery弹出窗体对话框在Firefox中不起作用，但在Chrome和IE中可以正常工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Process Detail</title> 
<link href="baf.css" rel="stylesheet" type="text/css" /> 

<!-- Email CSSs and Javascripts - Start --> 
<link rel="stylesheet" href="..\js\jquery-ui-1.10.4.custom\development-bundle\themes\ui-lightness\jquery-ui.css"> 
<style> 
.font62Percent { font-size: 80%; } 
label.email_label, input.email_input { display:block; } 
input.text { margin-bottom:5px; width:95%; padding: .2em; } 
fieldset { padding:0; border:0; margin-top:10px; } 

.ui-dialog .ui-state-error { padding: .3em; } 
.validateTips { border: 1px solid transparent; padding: 0.3em; } 
.invisible {visibility:hidden; position:absolute; opacity: .99; z-index:2;} 
.visible {visibility:visible;} 
</style> 

<script src="..\js\jquery-ui-1.10.4.custom\js\jquery-1.10.2.js"></script> 
<script src="..\js\jquery-ui-1.10.4.custom\development-bundle\ui\jquery-ui.custom.js"></script> 
    <script> 
$(function() { 

    //get a reference to the element 
    var myBtn = document.getElementById('email_architects'); 
    //add event listener 
    myBtn.addEventListener('click', function(event) { 
     $("#dialog-form").addClass("visible"); 
     $("#dialog-form").dialog("open"); 
    }); 
    }); 
</script> 
<!-- Email CSSs and Javascripts - End --> 

</head> 

<body> 


<!-- Email Form - Start --> 
    <div id="dialog-form" title="Report Bad Data" class="font62Percent invisible"> 
    <form> 
    <p class="validateTips">All form fields are required.</p> 
    <fieldset> 
     <label class="email_label" for="mail_title">Title</label> 
     <input type="text" name="mail_title" id="mail_title" class="text ui-widget-content ui-corner-all email_input"> 
     <label class="email_label" for="mail_message">Message</label> 
     <textarea rows="10" cols="78" name="mail_message" id="mail_message" class="text ui-widget-content ui-corner-all email_input">Enter your message here...</textarea> 
    </fieldset> 
    </form> 
</div> 
<!-- Email Form - End --> 

<?php echo "<br> <button id='email_architects'>Bad Data?</button>"; ?>

来源

2014-04-25 Jemru

我已经创建了一个fiddle从您的代码请检查。

下面的代码在chrome和FF中都正常工作。

$(function() { 

$("#email_architects").click(function(event) { 
    $("#dialog-form").addClass("visible"); 
    $("#dialog-form").dialog(); 
}); 
});

来源

2014-04-25 10:08:05 Sandeeproop

嗨@Sandeeproop非常感谢你的投入和jfiddle。但是，当我将代码更改为“dialog（）”时，它仍然不适用于我。在Firefox中使用Jquery有什么规则？谢谢。 – Jemru

必须有一些其他的错误，检查萤火虫错误控制台。 – Sandeeproop

嗨@Sandeeproop，我检查了萤火虫，它给了我错误：ReferenceError：$未定义。 \t $（function（）{ – Jemru

JQuery弹出窗体对话框在Firefox中不起作用，但在Chrome和IE中可以正常工作

回答

相关问题