Firefox like dialog box

where can i research this...

Page 1 of 1

4 Replies - 1066 Views - Last Post: 23 June 2010 - 07:56 PM

#1 Xmod  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 61
  • Joined: 19-January 07

Firefox like dialog box

Posted 19 June 2010 - 10:28 AM

I got a php site and I want to flag users which are violating the rules... I want the users to see a dialog box on the top of the page just like firefox asks if we want to allow pop ups from a site, where would I find something similar to research the code or pseudo to start coding it?
Is This A Good Question/Topic? 0
  • +

Replies To: Firefox like dialog box

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2959
  • View blog
  • Posts: 10,183
  • Joined: 08-August 08

Re: Firefox like dialog box

Posted 19 June 2010 - 10:35 AM

You can use Javascript to document.write a div to the page. That div will have it's own position, size, z-index, and visibility. When you want it to disappear you can set its visibility to hidden and its z-index so that it's behind everything else so it's not in the way.

There are probably better ways to do it than what I've described. I'll move this to Javascript so others can help.

This post has been edited by CTphpnwb: 19 June 2010 - 11:04 AM

Was This Post Helpful? 1
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,989
  • Joined: 08-June 10

Re: Firefox like dialog box

Posted 19 June 2010 - 12:11 PM

Hey.

You can use Javascript to add/remove the box. You can create an element by using the document.createElement function, and attach/remove it using the appendChild/removeChild functions.

For example, these two functions will add and remove a DIV with a message onto the page:
function showDialog() {
    var dialog = document.createElement("div");
    dialog.setAttribute("id", "WarningDialog");
    dialog.innerHTML = "<h1>Attention Please!</h1>\n\
                        <p>You are violating the rules! No cookie for you!!</p>";
    document.body.appendChild(dialog);
}
function hideDialog() {
    var dialog = document.getElementById("WarningDialog");
    if(dialog) {
        document.body.removeChild(dialog);
    }
}


Which you could then call using buttons, or links, or whatever else you might want to use.
<button onclick="showDialog()">Show</button>
<a onclick="hideDialog()" href="javascript: void(0);">Hide</a>


If you want the dialog to show from the start, use the body.onload event. If you set this before that event fires (like, in a <script> tag in the header) you would most likely get an error. Can't add to the body if the body hasn't been created yet.

You can set this in your HTML, if you are not comfortable with Javascript. Just alter the <body> tag of the page:
<body onload="showDialog()">


And you would use CSS to style the DIV, using the ID set by the Javascript code:
#WarningDialog {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    border-bottom: 1px solid;
    text-align: center;
    background-color: #FFFFAA;
}
#WarningDialog h1 {
    font-size: 16px;
    margin: 3px;
}
#WarningDialog p {
    margin: 0px 3px 3px 3px;
}

This makes it appear at the top of the page, in a yellow box.
Was This Post Helpful? 0
  • +
  • -

#4 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: Firefox like dialog box

Posted 23 June 2010 - 01:20 PM

Hi Xmod,

No offence Atli, but I think thats probably over complicating what is a simple task really. Perhaps you are suggesting adding/removing divs completely so they don't interfere with the rest of the page, but its worth noting that if you make a div invisible, you can no longer access any of the functionality of that div (say if it contained a button, you cannot click that button when the div is invisible). Equally, that div will not block access to any content that sits behind it. Finally setting the div position to fixed will ensure that it will not interfere with the layout of any of the rest of the page.

The method I would take here would be to create a 100% width div, fixed position, no margin, no padding, top:0px, left:0px, and then build the notice as you want it too look in there. If you wanted to emulate the scroll down behaviour of the firefox notice, then just script this starting with a negative top value for the div and moving towards 0.
Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,989
  • Joined: 08-June 10

Re: Firefox like dialog box

Posted 23 June 2010 - 07:56 PM

View Posthusseycoding, on 23 June 2010 - 07:20 PM, said:

Perhaps you are suggesting adding/removing divs completely so they don't interfere with the rest of the page...

No not really. I realize that display: none will hide an element, effectively removing it from the client's window, but it still doesn't sit right with me. Not in this case at least. Xmod mentions that this will be used to warn users that are breaking the rules, which suggests that this box will not be a part of the page 99% of the time. It just seems right, from my perspective, to not include it by default, but add it when needed.

But then again, I have a tendency to over-design things :)

Your way is certainly simpler to implement, and the end result will be the same. Perhaps that is the better method.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1