Web Code Logics

Improve your skills

December 20, 2016

Show Bootstrap Modal Popup on Button Click in jQuery with Example

, , , , No comments

In this article, we will discuss about how to  show bootstrap modal popup on button click using jQuery with example and live demo.

Write the code as shown below-

 HTML:
<body style="background: #E0EDFA; margin-top: 100px;">

    <div style="text-align: center; width: 100%;">
        <!--Button to Show Basic modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicModalPopup">Basic Modal</button>
        <!--Button to Show Large modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#largeModalPopup">Large Modal</button>
        <!--Button to Show Small modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallModalPopup">Small Modal</button>
    </div>

    <!-- Basic Bootstrap Modal Popup -->
    <div id="basicModalPopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="basicModalLabel">Basic Modal Title</h4>
                </div>
                <div class="modal-body">
                    Welcome to <a href="http://webcodelogics.com" target="_blank">webcodelogics.com</a><br/>
                    
                    ...
                </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>
        </div>
    </div>

    <!-- Large Bootstrap Modal Popup -->
    <div id="largeModalPopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="largeModalLabel">Large Modal Title</h4>
                </div>
                <div class="modal-body">
                    Welcome to <a href="http://webcodelogics.com" target="_blank">webcodelogics.com</a><br/>
                    We can make bootstrap modal larger by adding an extra class '.modal-lg' with class '.modal-dialog'.<br/>
                    ...
                </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>
        </div>
    </div>

    <!-- Small Bootstrap Modal Popup -->
    <div id="smallModalPopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="smallModalLabel">Small Modal Title</h4>
                </div>
                <div class="modal-body">
                    Welcome to <a href="http://webcodelogics.com" target="_blank">webcodelogics.com</a><br/>
                     We can make bootstrap modal smaller by adding an extra class '.modal-sm' with class '.modal-dialog'.<br/>
                    ...
                </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>
        </div>
    </div>

</body>

After that, attach the jquery library link, bootstrap jquery link and bootstrap css link in head part as shown below-

JS:
<head>
    <title>Show Bootstrap Modal Popup on Button Click in jQuery with Example</title> 
    <!-- jQuery Library Link -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <!-- Bootstrap compiled and minified CSS Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <!-- Bootstrap compiled and minified JavaScript Link -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
Now save the file and run on browser to view the bootstrap modal popup result.

Preview:
show-hide-bootstrap-modal-popup-on-button-click-in-jquery-with-example-and-live-demo


 Live Demo:








Read More

December 15, 2016

How to get browser name, version and other information in javascript with example

, No comments

In this article, we will discuss about how to get the visitor's browser name, version and other information using window.navigator object in javascript.
get-browser-name-version-and-other-information-in-javascript-jquery-with-example

window.navigator have different properties which contains following information like-
Property Description
Browser Application Name navigator.appName Returns the application name of the browser.
Browser Version navigator.appVersion Returns version information of the browser
Browser Application Code Name navigator.appCodeName Returns the application code name of the browser.
Browser Engine Name navigator.product Returns the product name of the browser engine.
Browser Agent navigator.userAgent Returns the user-agent header sent by the browser to the server Returns the complete information of a browser like name, code name version etc.
Browser Platform navigator.platform Returns the platform of the browser (operating system).
Browser Language navigator.language Returns the language of the browser.
Is Browser Online? navigator.onLine Returns true if the browser is online, otherwise false.
Is Cookies Enabled? navigator.cookieEnabled Returns true if cookies are enabled in the browser, otherwise false.
Is Java Enabled? navigator.javaEnabled() Returns true if Java is enabled in the browser, otherwise false.
Write the code to get browser details as shown below-

HTML:
<body style="background: #E0EDFA; text-align: center; margin-top: 100px;">  
  <div id="dvBrowserInfo"></div>  
</body>

After that, attach the jquery library link and write the below javascript code in head part as shown below-

JS:
  
   Get Browser Name, Version and Other Information in javascript with Example

Now save the file and run on browser to get all useful browser information.

Result (your browser detail):





Read More
Subscribe to: Posts (Atom)

Subscribe for Latest Update

Popular Posts