Tuesday, September 1, 2015

Bootstrap Tutorial For Beginners 18 - Bootstrap Modal (dialog box or pop...









<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse"
                    data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"> Home </a></li>
                    <li><a href="#" data-toggle="modal" data-target="#MyModal">About</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle"
                           data-toggle="dropdown">
                            Learn <b class="caret"></b>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">Examples</li>
                                <li>
                                    <a href="#">C++</a>
                                </li>
                                <li><a href="#">Java</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Tutorials</li>
                                <li><a href="#">C++</a></li>
                                <li><a href="#">Java</a></li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="jumbotron text-center">
            <h1>Hello World !!!</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
                Pellentesque mattis justo vel augue pretium euismod. Interdum
                et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
                turpis eros.
            </p>
            <button type=button class="btn btn-primary"><span class="glyphicon glyphicon-user" style="font-size:30px ; color:blue"></span> </button>
            <button type=button class="btn btn-success"><span class="glyphicon glyphicon-ok" style="font-size:30px"></span> </button>
        </div>


        <div id="MyModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
                Pellentesque mattis justo vel augue pretium euismod. Interdum
                et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
                turpis eros.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Fixed footer -->
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-text pull-left">
                <p>copyright ProgrammingKnowledge 2015</p>
            </div>
            <div class="navbar-text pull-right">
                <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript
       plugins) -->
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>












Searches related to bootstrap modal

bootstrap modal example

bootstrap modal width

bootstrap modal ajax

twitter bootstrap modal example

bootstrap modal form

bootstrap modal not working

bootstrap modal position

angular bootstrap modal

No comments:

Post a Comment