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
    New Coder
    Join Date
    May 2008
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Senior Coders ..help plzz

    Hi,
    I am trying to pop-up a box similar to alertbox kind of thing but I am having a problem in the approach as my pop box should be able to take input into three text fields where we can enter text and also ..the pop-up has to be colorful with borders etc ofcourse with textinside side ..warning or welcoming..I have tried to use css but succeded only to a little percentage ..so I hope someone might give a solution...

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Don't address your question to a particular audience. We regulars and new coders may be nubs but occasionally we help. . And plus, you don't want to exclude supreme and elite coders!

    I would try a lightbox-ish type of thing. http://www.ajaxrain.com/tagcloud.php?tag=lightbox has a list of good ones. A lot of them are customizable, and they already have beautiful effects. Most of them also support html content, some even have simple XHR APIs for dynamic AJAX requests. This page shows a rundown of the hundreds of choices in lightbox scripts and a comparison of their features.

    If you want to make a manual one, just have an absolutely positioned and centered DIV and fill it with your content every time you call the alert as well as make it appear.

    Basic idea:
    Code:
    function customAlert(text) {
    var alert=document.getElementById('alertDiv');
    alert.innerHTML=text;
    alert.style.display="block";
    ... etc ...
    }
    Last edited by binaryWeapon; 06-24-2008 at 11:25 PM.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Here's one I wrote if you don't feel like hunting.

    Code:
    //*******************************************************
    // Turns on the lightbox
    //*******************************************************
    function lightBoxOn(){
        var cover_element=document.getElementById('e');
        var div=document.createElement('div');
        div.style.position='absolute';
        div.id='lightbox';
        div.style.left=cover_element.offsetLeft+'px';
        div.style.top='0px';
        div.style.height=cover_element.offsetHeight+'px';
        div.style.width=cover_element.offsetWidth+'px';
        div.style.backgroundColor='#CCCCCC';
        div.style.clear='left';
        div.style.opacity='.5';
        div.style.filter='alpha(opacity=50)';
        div.style.zIndex='100';
        
        var shim=document.createElement('iframe');
        shim.style.position='absolute';
        shim.id='lightbox_shim';
        shim.style.left=cover_element.offsetLeft+'px';
        shim.style.top='0px';
        shim.style.height=cover_element.offsetHeight+'px';
        shim.style.width=cover_element.offsetWidth+'px';
        shim.style.backgroundColor='#CCCCCC';
        shim.style.clear='left';
        shim.style.opacity='.5';
        shim.style.filter='alpha(opacity=50)';
        shim.style.zIndex='99';
        document.body.appendChild(shim);
        document.body.appendChild(div);
    }
    //*******************************************************
    // Turns off the lightbox
    //*******************************************************
    function lightBoxOff(){
        document.body.removeChild(document.getElementById('lightbox'));
        document.body.removeChild(document.getElementById('lightbox_shim'));
        document.body.removeChild(document.getElementById('lightbox_content'));
    }
    //*******************************************************
    // Adds a custom object to the lightbox
    //*******************************************************
    function addToLightBox(obj){
        var cover_element=document.getElementById('e');
        document.body.appendChild(obj);
        obj.style.position='absolute';
        obj.style.left=(((cover_element.offsetWidth / 2) + (cover_element.offsetLeft*1) - obj.offsetWidth / 2)) +'px';
        obj.style.top=((cover_element.offsetHeight / 2) - (obj.offsetHeight*1))+'px';
        obj.style.zIndex='101';
        obj.id='lightbox_content';
    }
    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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