Results 1 to 2 of 2

Thread: Alert by CSS3 & Javascript

  1. #1
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Alert by CSS3 & Javascript

    CSS:
    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>
    JS:
    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: www.yepi3games.org/alert.htm
    Last edited by traq; 04-27-2014 at 06:34 AM. Reason: removed "hot" link

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Do you have a question?

    Or, if you wish to share this code with users here on Dynamic Drive, you can submit it here (please note the instructions and terms of submission).

Similar Threads

  1. Javascript alert to jquery dialog UI
    By louisaivy in forum JavaScript
    Replies: 5
    Last Post: 10-24-2011, 04:40 AM
  2. Can we ADD style sheet to javascript alert box?
    By vkalasa in forum JavaScript
    Replies: 1
    Last Post: 03-29-2010, 11:38 AM
  3. Replies: 0
    Last Post: 12-04-2009, 02:20 AM
  4. Stopping JavaScript alert boxes
    By thinksmart12 in forum JavaScript
    Replies: 10
    Last Post: 10-14-2006, 08:48 PM
  5. Javascript alert blocker
    By bebjakm in forum JavaScript
    Replies: 1
    Last Post: 03-06-2005, 09:23 AM

Bookmarks

Posting Permissions

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