Пользовательский предупреждающий ящик отображается неправильно

Я использую пользовательское поле оповещения slayeroffice, slayeroffice (period) com/code/custom_alert /. (Не удается разместить более двух ссылок) В моем браузере это выглядит так. Поле предупреждения - синее, расположенное посередине экрана.Пользовательский предупреждающий ящик отображается неправильно

http://i.stack.imgur.com/u1TEz.png

На мой местный он показывает, как это, я выделил окно предупреждения. Хотелось бы, чтобы я мог связать это изображение. Он работает в той же версии браузера, но один из них находится на локальном.

http://i.stack.imgur.com/0xehV.png

Что я делаю неправильно?

Вот мой код, интегрированный с кодом slayeroffice.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %> 

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    Namespace="System.Web.UI" TagPrefix="asp" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
</head> 
<body> 

<script type="text/javascript"> 

function showPopUp(){ 
    setTimeout(function() {alert("Warning");}, 5000); 
} 

    function delayer(){ 
    showPopUp(); 
    } 


    // constants to define the title of the alert and button text. 
var ALERT_TITLE = "Oops!"; 
var ALERT_BUTTON_TEXT = "Ok"; 

// over-ride the alert method only if this a newer browser. 
// Older browser will see standard alerts 
if(document.getElementById) { 
    window.alert = function(txt) { 
     createCustomAlert(txt); //overrides alert method 
    } 
} 

function createCustomAlert(txt) { 
    // shortcut reference to the document object 
    d = document; 

    // if the modalContainer object already exists in the DOM, bail out. 
    if(d.getElementById("modalContainer")) return; 

    // create the modalContainer div as a child of the BODY element 
    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); 
    mObj.id = "modalContainer"; 
    // make sure its as tall as it needs to be to overlay all the content on the page 
    mObj.style.height = document.documentElement.scrollHeight + "px"; 

    // create the DIV that will be the alert 
    alertObj = mObj.appendChild(d.createElement("div")); 
    alertObj.id = "alertBox"; 
    // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert 
    if(false) alertObj.style.top = document.documentElement.scrollTop + "px"; 
    // center the alert box 
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px"; 

    // create an H1 element as the title bar 
    h1 = alertObj.appendChild(d.createElement("h1")); 
    h1.appendChild(d.createTextNode(ALERT_TITLE)); 

    // create a paragraph element to contain the txt argument 
    msg = alertObj.appendChild(d.createElement("p")); 
    msg.innerHTML = txt; 

    // create an anchor element to use as the confirmation button. 
    btn = alertObj.appendChild(d.createElement("a")); 
    btn.id = "closeBtn"; 
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); 
    btn.href = "#"; 
    // set up the onclick event to remove the alert when the anchor is clicked 
    btn.onclick = function() { removeCustomAlert();return false; } 


} 
// removes the custom alert from the DOM 
function removeCustomAlert() { 
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); 
} 
</script> 
    <form id="form1" runat="server"> 
    <div> 
     &nbsp;</div> 
     &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
       <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="delayer();return false;" />&nbsp; 
    </form> 
</body> 
</html>

источник

2013-07-09 kaser

Все, что обнаруживает «новый браузер» по проверке наличия методы «getElementById» должно быть удалился в вычислительном музей. – Pointy

Похоже, что вам не хватает CSS для создания всплывающего окна. Однако в стороне я бы пошел с более современным решением. Это кажется немного устаревшим. –

Надеюсь, вам не нужно, чтобы window.alert() блокировался. – epascarello

Вы пропускаете стили:

<style type="text/css"> 

#modalContainer { 
    background-color:transparent; 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0px; 
    left:0px; 
    z-index:10000; 
    background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */ 
} 

#alertBox { 
    position:relative; 
    width:300px; 
    min-height:100px; 
    margin-top:50px; 
    border:2px solid #000; 
    background-color:#F2F5F6; 
    background-image:url(alert.png); 
    background-repeat:no-repeat; 
    background-position:20px 30px; 
} 

#modalContainer > #alertBox { 
    position:fixed; 
} 

#alertBox h1 { 
    margin:0; 
    font:bold 0.9em verdana,arial; 
    background-color:#78919B; 
    color:#FFF; 
    border-bottom:1px solid #000; 
    padding:2px 0 2px 5px; 
} 

#alertBox p { 
    font:0.7em verdana,arial; 
    height:50px; 
    padding-left:5px; 
    margin-left:55px; 
} 

#alertBox #closeBtn { 
    display:block; 
    position:relative; 
    margin:5px auto; 
    padding:3px; 
    border:2px solid #000; 
    width:70px; 
    font:0.7em verdana,arial; 
    text-transform:uppercase; 
    text-align:center; 
    color:#FFF; 
    background-color:#78919B; 
    text-decoration:none; 
} 
</style>

источник

2013-07-09 21:48:06 EkoostikMartin

Спасибо. Я знал, что чего-то не хватает. – kaser

Пользовательский предупреждающий ящик отображается неправильно

ответ

Смежные вопросы