Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 30th, 2014, 05:55 AM
Registered User
 
Join Date: Apr 2014
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Convert jQuery to javascript

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>
<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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Ch 11 jQuery unobtrusive javascript stopped the ShowMessageBox AlanWheeler BOOK: Beginning ASP.NET 4.5 : in C# and VB 9 March 6th, 2014 07:19 AM
XMPP senior programming javascript and jquery login user name is Chinese can not logi 2591349@qq.com BOOK: Professional XMPP Programming with JavaScript and jQuery 0 January 19th, 2013 03:08 AM
Get the displying content from the div using javascript or jquery thava BOOK: Beginning HTML, XHTML, CSS, and JavaScript 0 January 23rd, 2012 04:26 AM
Convert an algorithm to JavaScript mikky21 Javascript How-To 7 May 16th, 2011 10:48 AM
JavaScript vs JQuery skijor ASP.NET 3.5 Basics 4 August 7th, 2009 10:21 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.