SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DHTML/CSS Information Window

    i'm basically wanting to create a custom alert box. i know i can create a <div> that's hidden, show it when triggered, then hide once the user interacts with the <div> - but i'm wanting to block the user from clicking anywhere else on the page until they've interacted with the <div> alert.

    i've seen this done with things similarly with greybox. i just want to understand how to make my own and keep it really simple.

    i don't even know what to call this thing... css pop-up, maybe?

  2. #2
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k - here's what i got so far... this does what i want - to an extent.
    Code:
    /*** add activity ***/
    #add-activity {
        position: absolute;
        width: 450px;
        height: 200px;
        border: 1px solid rgb(46, 46, 46);
        background-color: rgb(255, 255, 255);
        z-index: 9;
        font-size: 14px;
    }
    #add-activity h3 {
        margin: 0;
        color: rgb(254, 128, 52);
        border-bottom: 1px solid rgb(254, 208, 151);
        background-color: rgb(46, 46, 46);
        padding: 2px;
    }
    /*** curtain ***/
    #curtain {
        background-color: rgb(46, 46, 46);
        opacity: .5;
        width: 100&#37;;
        height: 700px;
        z-index: 8;
        position: absolute;
    }
    and i have this in the body...
    Code:
    <body>
    <div id="add-activity">
        <h3>Add Activity</h3>
        
    </div>
    <div id="curtain"></div>
    now my only problem is centering #add-activity to the middle of the page (both width and height)


Bookmarks

Posting Permissions

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