InPage Box

by Joe Saad

HTML

<!-- 
input:checkbox.left#enterPin+label{Enter Pin}

div#inPageBox>.header{Pin Required}+.content(>form>p{Reliant has texted a pin to your mobile phone. Please enter the pin to active your phone}+label{Pin: }+input:text+hr)+.handle>button:button{Save}+a{Request new pin} -->

<input type="checkbox" name="enterPin" id="enterPin" class="left" /><label for="enterPin" class="left">Enter Pin</label>

<div id="inPageBox">
    <div class="header">Pin Required</div>
    <div class="content">
        <form action="">
            <p>Reliant has texted a pin to your mobile phone. Please enter the pin to active your phone</p>
            <label for="textedPin">Pin:</label>
            <input type="text" name="textedPin" id="textedPin" maxlength="6" />
            <hr />
        </form>
    </div>
    <div class="handle">
        <button type="button">Save</button><a href="">Request new pin</a>

    </div>
</div>

CSS

#inPageBox {
    border:2px solid #00aeef; display:none;
}
#inPageBox .header {
    background-color: #00aeef;
    color: #fff;
    padding:3px 5px;
}
#inPageBox .content, #inPageBox .handle {
    padding:5px;
}
hr {
    border-top: 2px dotted #ccc;
}

JavaScript

$('#enterPin').click(function(){
    if ($(this).is(':checked')) {
        $('#inPageBox').show();
    } 
    else {
        $('#inPageBox').hide();
    }

});