What’s the tabindex=”-1″ in bootstrap for

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not. [Both] tabindex=”0″ and tabindex=”-1″ have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should … Read more

Angular 2 ng2-bootstrap modal inside child component called from parent component

Your common child modal component will be as below import {Component,Input, ViewChild} from ‘@angular/core’; import { ModalDirective } from ‘ng2-bootstrap/ng2-bootstrap’; @Component({ selector: ‘common-modal’, template: ` <div bsModal #childModal=”bs-modal” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”mySmallModalLabel” aria-hidden=”true”> <div class=”modal-dialog modal-sm”> <div class=”modal-content”> <div class=”modal-header”> <h4 class=”modal-title pull-left”>{{title}}</h4> <button type=”button” class=”close pull-right” aria-label=”Close” (click)=”hideChildModal()”> <span aria-hidden=”true”>&times;</span> </button> </div> <div … Read more

Bootstrap modal: is not a function

You have an issue in scripts order. Load them in this order: <!– jQuery –> <script src=”https://code.jquery.com/jquery-1.11.0.min.js”></script> <!– BS JavaScript –> <script type=”text/javascript” src=”https://stackoverflow.com/questions/25757968/js/bootstrap.js”></script> <!– Have fun using Bootstrap JS –> <script type=”text/javascript”> $(window).load(function() { $(‘#prizePopup’).modal(‘show’); }); </script> Why this? Because Bootstrap JS depends on jQuery: Plugin dependencies Some plugins and CSS components depend on … Read more

In Bootstrap open Enlarge image in modal

You can try this code if you are using bootstrap 3: HTML <a href=”#” id=”pop”> <img id=”imageresource” src=”http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg” style=”width: 400px; height: 264px;”> Click to Enlarge </a> <!– Creates the bootstrap modal where the image will appear –> <div class=”modal fade” id=”imagemodal” 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”><span … Read more

How to pass $_GET variables from a link to a bootstrapmodal?

The simple solution to pass id, fetch records from database against passed id and show in modal is; Simple Solution Modal Call button <td><span data-placement=”top” data-toggle=”tooltip” title=”Show”><a class=”btn btn-primary btn-xs” data-toggle=”modal” data-target=”#editBox” href=”https://stackoverflow.com/questions/32433765/file.php?id=<?php echo $obj->id;?>”><span class=”glyphicon glyphicon-pencil”></span></a></span></td> Modal HTML Put following modal HTML outside the while loop in page where the above call button is … Read more

Launch Bootstrap Modal on Page Load

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so: JS <script type=”text/javascript”> $(window).on(‘load’, function() { $(‘#myModal’).modal(‘show’); }); </script> HTML <div class=”modal hide fade” id=”myModal”> <div class=”modal-header”> <a class=”close” data-dismiss=”modal”>×</a> <h3>Modal header</h3> </div> <div class=”modal-body”> <p>One … Read more