Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Alert by CSS 3

  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alert by CSS 3

    CSS3:
    Code:
    <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>
    HTML:
    Code:
    <div class="msgBox">
    	<ul class="title">Alert</ul>
        <ul class="msgContent">No messege</ul>
        <ul>
            <li class="ok">Ok</li>
        </ul>
    </div>
    Javascript:
    Code:
    <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: Confirm

  • #2
    New Coder
    Join Date
    Apr 2014
    Location
    Daytona Beach, FL
    Posts
    53
    Thanks
    0
    Thanked 1 Time in 1 Post
    just because you have 9 lines of code in javascript, doesn't mean it belongs in the javascript section. move this to a CSS related topic.
    In my opinion, this is a worthless script, mainly made up by css styling for the box, the font for the text, the ok button design. and then the show or hid for the message box.

    I can not find in any why why someone would find this use full. The script that is provide would only allow this message box to be used on its own page and is not a pop up message.

    Rewrite, and republish in a css related topic.


  •  

    Posting Permissions

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