Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Modal

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 623
    Comment on it

    A modal is a child window that is placed over its parent window. Normally, the reason for existing is to show content from a different source that can have some communication without leaving the parent window. Child windows can give data, collaboration, or more.

    Modals are fundamentally a dialog box that is utilized to give important data to the client or provoke client to take vital activities before proceeding onward. Modal windows are broadly used to caution clients for circumstances like session time out or to get their last affirmation before going to play out any basic activities, for example, saving or deleting important data.

     

    Bootstrap modal plugin are used to make exceptionally brilliant and adaptable dialog boxes. 

    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>Do you want to save changes you made to document before closing?</p>
                    <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
                </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 changes</button>
                </div>
            </div>
        </div>
    </div>

    Following links and Script should be added to create a modal :-

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#myModal").modal('show');
    	});
    </script>

    https://jsfiddle.net/62w7qwh4/2/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: