JQuery弹出窗体对话框在Firefox中不起作用,但在Chrome& IE

时间:2014-04-25 09:57:38

标签: javascript jquery jquery-ui firefox

我的代码可以在Chrome和IE中使用,但在Firefox中不起作用。 我在点击Bad Data时使用JQuery打开弹出div格式?发送电子邮件。 在Chrome和IE中,它确实打开了弹出式div格式,但在Firefox中却没有。 请帮忙。 非常感谢你。

<!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>"; ?>

1 个答案:

答案 0 :(得分:1)

我已从您的代码中创建fiddle,请检查。

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

$(function() {

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