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中可以正常工作

回答

相關問題