Problems with simple modal in IE9
Asked Answered
H

1

1

Yesterday I launched a new website. Before I uploaded the files to my server, I tested the website in IE8, Firefox, Safari and Chrome, and everything seemed to be OK. But I just installed IE9 and my Simple Modal boxes don't show up in this browser.

I'm using the following javascript code:

jQuery(function ($) {
    $('a.modal').click(function (e) {
        $('#' + this.id + "content").modal({onOpen: function (dialog) {
            dialog.overlay.fadeIn('fast', function () {
                dialog.container.fadeIn('fast');
                dialog.data.fadeIn('slow');
            });
        }});
        return false;
    });
    $.modal.defaults.onClose = function (dialog) {
        dialog.data.fadeOut('fast', function () {
            dialog.container.hide('fast', function () {
                dialog.overlay.fadeOut('fast', function () {
                    $.modal.close();
                });
            });
        });
    };
});

The HTML code of one of the boxes:

<div id="registercontent">
    <div id="registerresult" style="display: none;"></div>
    <form class="ajaxform" id="register" name="register" method="post" action="register.php">
    <table>
        <tr>
          <td>Username: </td>
          <td><input type="text" name="username" value="" /></td>
        </tr>
        <tr>  
          <td>Password: </td>
          <td><input type="password" name="password" value="" /></td>
        </tr>
        <tr>
          <td>Confirm password: </td>
          <td><input type="password" name="password2" value="" /></td>
        </tr>
        <tr>
          <td>Email address: </td>
          <td><input type="text" name="email" value="" /></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" value="Register!" class="button" /></td>
        </tr>
    </table>
    </form>
</div>

If you need to see more code, please visit the website: Mixious (for example contact and register in the right top menu have to open a modal box)

Does anybody have an idea how to solve this problem?

Hurryscurry answered 31/3, 2011 at 12:3 Comment(1)
Try downgrading to a jquery < 1.5 if you are using 1.5. Or try 1.5.1 or the recent RC for 1.5.2. Seems to be a bug in the newer jquery versionsStablish
S
2

Open the developer tools in IE9 (F12) and open the Console tab. You'll see an error being logged. Something about getElementsByTagName not defined on some object.

See my comment on your original question. Might be a problem with the more recent jQuery versions.

Seems to be fixed in 1.5.1, though I am not sure, I am reading that correctly: http://bugs.jquery.com/ticket/8052

Stablish answered 31/3, 2011 at 14:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.