Question

使用simplemodal和多个浏览器时遇到恼人的问题。我已经整理了一个说明问题的样本。当它在Firefox或Chrome中运行时，它可以正常工作。这是一个简单的链接，点击时会显示一个简单的对话框。如果单击“是”按钮，将弹出一个警告，如果单击“否”，则对话框将关闭而不执行任何操作。在Internet Explorer中运行时出现问题。在版本9中，对话框显示在页面内容的下方，在左侧，它应该出现在页面中间。它还将光标更改为等待，然后挂起。在版本8中，对话框出现在同一位置，但按钮是可单击的，对话框功能 - 它不在正确的位置。我查看了所有的CSS，无法发现问题所在。任何帮助，将不胜感激。这是页面代码和css：

HTML 标记

<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 标记：

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 标记：

#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

在另一个帖子中找到了答案 - 尽管在我发布之前进行了搜索，但该线程并没有显示在我的初始搜索中。

修复方法是更改以下内容：

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

对此：

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

Internet Explorer中的简单模态问题

1 个答案: