Agora Modal Onboarding

by munaf

HTML

Thomas Baker (1897–1918) was an Australian soldier, aviator and flying ace of the First World War. He was employed as a clerk with the Bank of New South Wales before he enlisted in the Australian Imperial Force in July 1915, for service in the First World War. Posted to an artillery unit on the Western Front, he was awarded the Military Medal for carrying out numerous repairs on a communications line while subject to severe artillery fire. In June 1917, Baker was awarded a bar to his decoration, for his part in quelling a fire in one of the artillery gun pits that was endangering approximately 300 rounds of shrapnel and high explosive. In September 1917, Baker applied for a position as a mechanic in the Australian Flying Corps. He was instead selected for flight training, and was posted to courses in the United Kingdom. He graduated as a pilot and was commissioned a second lieutenant in March 1918. Posted for active duty in France that June, Baker joined the ranks of No. 4 Squadron AFC. Over the next four months, he rose to the rank of captain and was credited with bringing down twelve German aircraft. He was shot down and killed on 4 November 1918. In February 1919, he was posthumously awarded the Distinguished Flying Cross. <a href="#">clickable</a>

<div class="agora-modal">
    <div class="agora-overlay"></div>
    <div class="agora-v-offset">
        <div class="agora-modal-window">
            <div class="agora-modal-titlebar">
                <span>Welcome to Wikipedia</span>
                <div class="agora-modal-close">&times;</div>
            </div>
            <div class="agora-modal-content">
                <p>Around the world</p>
                <p>Around the wooooorld</p>
                <p>Around the world</p>
                <p>Around the wooooorld</p>
                <p>Around the world</p>
                <p>Around the wooooorld</p>
                <p>Around the world</p>
                <p>Around the wooooorld</p>
                <p>Around...

CSS

.agora-modal { 
    z-index: 90000; 
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 16px;
    color: #252525;
}

.agora-overlay { 
    z-index: 90001;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.75; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE6 */
    filter: alpha(opacity=50); /* IE7 */
    
}

.agora-v-offset { 
    z-index: 90002; 
    position: fixed;
    top: 30%;
    width: 100%;
}

.agora-modal-window { 
    width: 50em;
    position: relative;
    margin: 0 auto;
}

.agora-modal-titlebar {
    width: 100%;
    padding: 0.4em 0;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
    
    background: #fbfbfb; /* Old browsers */
    background: -moz-linear-gradient(top,  #fbfbfb 0%, #f4f4f4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fbfbfb 0%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fbfbfb 0%,#f4f4f4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fbfbfb 0%,#f4f4f4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #fbfbfb 0%,#f4f4f4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
    
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    
    font-weight: bold;
    text-shadow: 0px 1px 1px #ffffff;
    filter: dropshadow(color=#ffffff, offx=0, offy=1); /* IE */
}

.agora-modal-titlebar span {
    font-size: 1.3em;
}

.agora-modal-titlebar .agora-modal-close {
    position: absolute;
    top: 0.15em;
   ...