So basically, in jquery what we can do is to load href attribute using the load function. This way we can use the url in <a> tag and load that in modal-body. <a href=”https://stackoverflow.com/site/login” class=”ls-modal”>Login</a> //JS script $(‘.ls-modal’).on(‘click’, function(e){ e.preventDefault(); $(‘#myModal’).modal(‘show’).find(‘.modal-body’).load($(this).attr(‘href’)); });
so create a reusable service for that… read here code here: angular.module(‘yourModuleName’).service(‘modalService’, [‘$modal’, // NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, modalFade: true, templateUrl: ‘/app/partials/modal.html’ }; var modalOptions = { closeButtonText: ‘Close’, actionButtonText: ‘OK’, headerText: ‘Proceed?’, bodyText: ‘Perform this … Read more
JSFiddle You are using not correct quotes: $(document).ready(function(){ var priceModal = “{‘attributes’:{‘Code’:’DBL’,’Total’:’200000′},’DayPrice’:{‘Date’:’2016-05-26′,’Rate’:’200000′}}”; var isitable=”<button class=”btn blue tes_button” data-toggle=”modal” data-target=”#priceModal” id=”priceModal”+priceModal+'”>tes</button>’; $(“#tes”).html(isitable); $(‘#priceModal’).on(‘show.bs.modal’, function(e) { var param = e.relatedTarget.id; console.log(param); }); });
<button type=”button” data-a=”<?echo $fila[‘idPlaza’];?>” href=”#editarUsuario” class=”modalEditarUsuario btn btn-warning btn-xs” data-toggle=”modal” data-backdrop=’static’ data-keyboard=’false’ title=”Editar usuario”> <img src=”../images/edit.png” width=”20px” height=”20px”> </button> Put below code in footer before end of </body> tag. <!– MODAL EDITAR–> <div id=”editarUsuario” class=”modal fade modal” role=”dialog”> <div class=”vertical-alignment-helper”> <div class=”modal-dialog vertical-align-center”> <div class=”modal-content”> </div> </div> </div> </div> Use Script like this. <script> $(‘.modalEditarUsuario’).click(function(){ … Read more
The position is right that it is “absolute”, while you need to specify this as an option to autocomplete: $( “.addresspicker” ).autocomplete( “option”, “appendTo”, “.eventInsForm” ); Where it can anchor the box with the results in any element, I have to stop it from being anchored to the form’s class! Here is a working JsFiddle!.
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
I fixed the issue by adding position:fixed to the body when opening a modal. Hope this will help you.
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”>×</span> </button> </div> <div … Read more
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
It’s intuitive to think of a modal as the view component of a state. Take a state definition with a view template, a controller and maybe some resolves. Each of those features also applies to the definition of a modal. Go a step further and link state entry to opening the modal and state exit … Read more