Internet Explorer中的簡單模態問題

簡單模式和多個瀏覽器帶來煩人的問題。我已經整理了一個說明問題的例子。當它在Firefox或Chrome中運行時，它工作正常。這是一個簡單的鏈接，點擊時會出現一個簡單的對話框。如果點擊「是」按鈕，會彈出一個提示，如果你點擊「否」，對話框會關閉而不做任何事情。在Internet Explorer中運行時會出現問題。在版本9中，對話框出現在頁面內容的下方，在左側，它應該出現在頁面中間。它也會將光標更改爲等待，然後掛起。在版本8中，對話框出現在同一位置，但按鈕是可點擊的，而對話框功能 - 它不在正確的位置。我查看了所有的CSS，並且無法發現問題可能是什麼。任何幫助，將不勝感激。這裏的頁面代碼和CSS：Internet Explorer中的簡單模態問題

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

來源

2012-05-24 piratepops

在另一個線索中找到了答案 - 儘管在我發佈之前進行了搜索，但該線索並未顯示在我的初始搜索中。

此修復程序是以下更改：

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-25 02:25:33 piratepops

Internet Explorer中的簡單模態問題

回答

相關問題