Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    help with CSS/JS confirm window

    hello,
    I found this code in a tutorial online. it was for an css/js custom alert window.
    I've altered the js to make it a confirm window.

    but i can't seem to make the two buttons even on the same time.

    any ideas would be great!

    the code:
    PHP Code:

    <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:400px;
        
    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 #okBtn {
        
    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;
        
    margin-left50px;
    }

    #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;
        
    margin-left250px;
    }

    /* unrelated styles */

    #mContainer {
        
    position:relative;
        
    width:600px;
        
    margin:auto;
        
    padding:5px;
        
    border-top:2px solid #000;
        
    border-bottom:2px solid #000;
        
    font:0.7em verdana,arial;
    }

    h1,h2 {
        
    margin:0;
        
    padding:4px;
        
    font:bold 1.5em verdana;
        
    border-bottom:1px solid #000;
    }

    </
    style>
    <
    script>
    // constants to define the title of the alert and button text.
    var ALERT_TITLE "Oops!";
    var 
    ALERT_BUTTON_TEXT "Ok";
    var 
    ALERT_BUTTON_TEXT2 "Cancel";


    if(
    document.getElementById) {
        
    window.CustomConfirm = function(txt) {
            
    createCustomAlert(txt);
        }
    }

    function 
    createCustomAlert(txt) {
        
    // shortcut reference to the document object
        
    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.operaalertObj.style.top document.documentElement.scrollTop "px";
        
    // center the alert box
        
    alertObj.style.left = (d.documentElement.scrollWidth alertObj.offsetWidth)/"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.appendChild(d.createTextNode(txt));

        
    // create an anchor element to use as the confirmation button. - OK
        
    btn alertObj.appendChild(d.createElement("a"));
        
    btn.id "okBtn";
        
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
        
    btn.href "#";

        
    btn.onclick = function() { removeCustomAlert();return true; }

        
    // create an anchor element to use as the confirmation button. - Cancel
        
    btn2 alertObj.appendChild(d.createElement("a"));
        
    btn2.id "closeBtn";
        
    btn2.appendChild(d.createTextNode(ALERT_BUTTON_TEXT2));
        
    btn2.href "#";

        
    btn2.onclick = function() { removeCustomAlert();return false; }
    }

    // removes the custom alert from the DOM
    function removeCustomAlert() {
        
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
    }
    </script>
    <body onload="CustomConfirm('This is a custom alert dialog that was created by over-riding the window.alert method.');">


    <input type="button" value = "Test the alert" onclick="return CustomConfirm('This is a custom alert dialog that was created by over-riding the window.alert method.');" /> 

    thanks in advance for your time!
    -Ken

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by angst View Post
    but i can't seem to make the two buttons even on the same time.
    That is because the two buttons are ordinary block-level elements in the normal flow.

    To bring them on the same line try to float them:
    Code:
    #alertBox #okBtn {
        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;
        margin-left: 50px;
        float: left;
    }
    
    #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;
        /* margin-left: 250px; */
        float: left;
    }

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    thanks, yes i figured it out just before you posted. js is somehow easier for me then css..lol

    thanks again,
    -Ken


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •