1

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;}
4

1 に答える 1

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'
},
于 2012-05-25T02:25:33.123 に答える