0

Javascriptでカスタムアラートボックスを作成しました。画像付きのテキストを追加しました。しかし、それは正確に整列していません。こんな感じでした。 ここに画像の説明を入力してください

同じ行に正しいマークとテキストを追加しようとしていますが、どうすればこれを実現できますか。誰か助けてくれませんか。以下にカスタムアラートボックス機能を追加しました。

function createCustomAlert(txt, string_url,fd) {
        // 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 (d.all && !window.opera) 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));
btn2 = alertObj.appendChild(d.createElement("img"));
        btn2.id = "fd";
        btn2.src = fd;
        // 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 = "";


        btn = alertObj.appendChild(d.createElement("img"));
        btn.id = "closeBtn";
        btn.src = 'new-go-next2.png';
        btn.href="#ss";
        //btn.height="30px";
        //btn.width="30px";
        //btn.href="#";


        // set up the onclick event to remove the alert when the anchor is clicked
        btn.onclick = function () { removeCustomAlert(); window.location = string_url; return false; }


    }
4

2 に答える 2

0

むしろ、div要素を作成すると、2つの列を持つテーブルが作成されます。1つ目はOKの「画像」を含み、2つ目は「テキスト」を含みます。これが役立つかどうかを確認してください。

于 2012-10-23T08:40:43.303 に答える
0

はい、テーブルを作成することは問題を解決するための優れたアプローチです。ところで、適切な位置と適切な float 属性を持つ要素でいくつかの内部 div を試すこともできます。

于 2012-10-23T09:50:51.610 に答える