Tuesday, October 29, 2013
New Improved and Easy to Use jQuery Dialog (Modal) with CSS and Nice Functionality
Hiiiiiii, we all want our site to be attractive with sliders, carousel, popups, tooltips, dialogs etc. Most of you have used many effects and features as provided by jQuery UI. I also use these jQuery features many a times, but now I am bored with jQuery UI features and also I can across the fact that jQuery UI doesn't provide that much good CSS and and effects that many other JS in the markets provide. So, here in this post, I'll be telling you how to open a new type of Dialog with improved CSS and it is easy to use. Here in this tutorial, dialog is referred as 'Modal'. The Opened Modal will look like as shown below :
CODE BEGINS :
<html><head>
<title>Modal</title>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h1> Welcome to Modal/ Dialogue open Tutorial<h2>
<!-- Button to trigger modal/dialogue -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Open Modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
This is you Modal Body.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
Hope you like this post……..Please Comment…………!!!!!!!!!
Tags: HTML , Javascript/Jquery
Subscribe to:
Post Comments (Atom)
1 Responses to “New Improved and Easy to Use jQuery Dialog (Modal) with CSS and Nice Functionality”
October 29, 2013 at 9:14 PM
Very nice post.. Keep Going..
Post a Comment