Convert jQuery to Javascript - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Convert jQuery to Javascript

juegosfrivsjuegosfrivs Viet NamPosts: 0Member

<style>
    .msgBox{
        position:absolute;
        z-index:10;
        border-radius:5px;
        border:1px solid #F5F5F5;
        background-color:#DDD;
        box-shadow:1px 1px 5px #999;
        overflow:hidden;
        display:none}
    .msgBox ul, .msgBox li{
        list-style:none;
        padding:0;
        margin:0;
        border:0}
        .msgBox .title{
            border-bottom:#AAA solid 1px;
            padding:5px;
            background-color:#CCC;
            font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight:bold;
            text-shadow:1px 1px #DDD;
            font-size:12px}
        .msgBox .msgContent{
            border-top:#F5F5F5 solid 1px;
            padding:5px;
            text-shadow:1px 1px #F1F1F1;
            font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
            font-size:12px}
        .msgBox .ok{
            text-shadow:1px 1px #F1F1F1;
            font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
            font-size:12px;
            margin:0 auto 5px auto;
            width:20px;
            padding:4px 5px 4px 5px;
            background-color:#CCC;
            text-align:center;
            cursor:pointer;
            transition:all 300ms linear;
            border:#DDD solid 1px;
            box-shadow:0 0 1px #AAA;
            border-radius:4px}
        .msgBox .ok:hover{
            background-color:#EEE}  
</style>
<div class="msgBox">
    <ul class="title">Alert</ul>
    <ul class="msgContent">No messege</ul>
    <ul>
        <li class="ok">Ok</li>
    </ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript">
// Upgraded confirm function
var msgBox = function(msg){
    var w =$(document).width(),
        h = $(document).height();
    var msgW = $('.msgBox').width(),
        msgH = $('.msgBox').height();
    $('.msgBox').css({left:(w-msgW)/2, top:(h-msgH)/2});
    $('.msgBox')
        .show()
        .find('.msgContent').text(msg);
    $('.msgBox').find('.ok').click(function(){
        $('.msgBox').hide();
    });
    $(document).keyup(function(event){
        if(event.which==13){
            $('.msgBox').hide();
        }
    });
}
msgBox('Enter your message!');
</script>

Demo: http://www.yepi3games.org/alert.htm

Tagged:
Sign In or Register to comment.