Question

Having an annoying problem with simplemodal and multiple browsers. I’ve put together a sample that illustrates the problem. When it is run in Firefox or Chrome, it works fine. It’s a simple link, that when clicked brings up a simple dialog. If you click the ‘Yes’ button, an alert pops up that says so, and if you click no, the dialog closes without doing anything. The problems occur when running in Internet Explorer. In version 9, the dialog appears below the page content and at the left side, when it should appear pretty much in the middle of the page. It also changes the cursor to wait, and then hangs. In version 8, the dialog appears in that same location, but the buttons are clickable, and the dialog functions – it’s just not in the right place. I’ve looked over all the css, and can’t spot what the problem might be. Any help would be appreciated. Here’s the page code and css:

HTML markup

<div id='container'>
    <div id='content'>
        <div id='confirm-dialog'>
        <h1>Dialog Test</h1>
        <a href="#" class='confirm'>Click Me for Dialog</a><br />
    </div>
    <div id='confirm'>
        <div class='header'><span>Dialog Window</span></div>
        <div class='message'>
            <p>This is a dialog.</p>
            <p>There are many like it, but this one is mine.</p>
            <p>Got it?</p>
        </div>
        <div class='buttons'>
            <div class='no simplemodal-close'>No</div>
            <div class='yes'>Yes</div>
        </div>
    </div>
</div>

JS markup:

jQuery(function ($) {
    $('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
        e.preventDefault();

        confirm("", function () {
            alert("You clicked YES");
        });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%",],
        overlayId: 'confirm-overlay',
        containerId: 'confirm-container', 
        containerCss: {
                            height: 250,
                            width: 400,
                            backgroundColor: '#fff',
                            border: '3px solid #ccc'
                      },

        onShow: function (dialog) {
            var modal = this;

            $('.message', dialog.data[0]).append(message);

            $('.yes', dialog.data[0]).click(function () {
                if ($.isFunction(callback)) {
                    callback.apply();
                }
                modal.close(); 
            });
        }
    });
}

CSS markup:

#confirm {display:none;}

/* Overlay */
#confirm-overlay {background-color:#eee; cursor:wait;}

/* Container */
#confirm-container {height:140px; width:420px; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-  align:left; background:#fff; border:2px solid #0F1F91;}
/* solid #336699; */
#confirm-container .header {height:30px; line-height:30px; width:100%;        background:url(../img/confirm/header.gif) repeat-x; color:#fff; font-weight:bold;}
#confirm-container .header span {padding-left:8px;}
#confirm-container .message {color:#333; font-size:14px; margin:0; padding:12px 4px 12px 8px;}
#confirm-container .buttons {line-height:26px; width:160px; float:right; padding:10px 8px 0;} 
#confirm-container .buttons div {float:right; margin-left:4px; height:26px; width:40px; color:#666; font-weight:bold; text-align:center; background:url(../img/confirm/button.gif) repeat-x; border:1px solid #bbb; cursor:pointer;} 
#confirm-container a.modal-close {margin-top:3px}
#confirm-container a.modal-close:link,
#confirm-container a.modal-close:active,
#confirm-container a.modal-close:visited {text-decoration:none; font-weight:bold; position:absolute; right:10px; top:2px; color:#fff;}
#confirm-container a.modal-close:hover {color:#ccc;}

Answer 1

Found the answer in another thread – despite searching before I posted, that thread didn’t show up on my initial search.

The fix was to change the following:

containerCss: {
  height: 250,
  width: 400,
  backgroundColor: '#fff',
  border: '3px solid #ccc',
},

To this:

containerCss: {
  height: 250,
  width: 400,
  backgroundColor: '#fff',
  border: '3px solid #ccc',
  position: 'absolute', top: '0px'
},