I'm currently migrating ui-bootstrap from 0.5.0 to 0.14.3 (yep, I haven't checked for updates for that long). In 0.5.0 there was a 'modal' directive with the 'options' config object. There was a 'backdropClick' option, which allowed the modal to be closed when mouse-clicked outside of it. In 0.14.3 the $uibModal service doesn't have such option. It has a 'backdrop' property, which could be set to 'static', allowing you to close the modal with a mouse click, but the modal has a backdrop. And what if it hasn't? Could I close it with a mouse click with 'backdrop' property set to 'false'?
There is a workaround for this missing feature.
You can use a directive to detect a "click outside" event and then in the related event call the close modal method.
In the example below (adapted from ui.bootstrap docs) I used angular-click-outside directive:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap','angular-click-outside']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log, $document) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$document.on('click', function(event) {
});
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
backdrop: false,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//rawgit.com/IamAdamJowett/angular-click-outside/master/clickoutside.directive.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div id="my-modal" click-outside="cancel()">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
Related
I am creating an ASP.NET (version 5) Core MVC application where I have a list of items. I try to make it so that when you click on an item it opens a (Bootstrap) modal view with the item's details (from another view). However, it seems like a hyperlink doesn't open the modal but instead opens the page itself (so not inside the modal). I got it working with a button, but I would like to make the user click on an item itself instead of a button.
This is the list item that I would like the user to be able to click on (the button is for testing):
I have the following page:
#model DetailsPatientFileViewModel
#section Scripts {
<script type="text/javascript">
$("#addBtn").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
$("#detailCard").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
</script>
}
<div class="patient-file-details-container">
<div class="title-container">
<h4>Treatments</h4>
<!-- This works just fine: -->
<button class=" btn-primary btn-primary" asp-controller="Treatment" asp-action="Create" asp-route-patientId="#Model.PatientId" data-toggle="ajax-modal" data-target="add-treatment" id="addBtn">Add</button>
</div>
<div id="component">
<!-- My list view component: -->
#await Component.InvokeAsync("TreatmentList", new { patientFileId = #Model.PatientFile.Id })
</div>
<!-- My modal: -->
<div id="Modal" class="modal fade">
</div>
</div>
The list view component (I also tested it with a button, see comment):
<ul class="card-list">
#foreach (var treatment in Model)
{
<li class="list-item-card">
<!-- Doesn't work: -->
<a asp-controller="Treatment" asp-action="Details" asp-route-id="#treatment.Id" data-toggle="ajax-modal" data-target="Modal" id="detailCard">
<h5>#treatment.Type</h5>
<p>#treatment.Date</p>
<p>#treatment.Employee.FirstName #treatment.Employee.LastName</p>
</a>
<!-- Does work: -->
<button asp-controller="Treatment" asp-action="Details" asp-route-id="#treatment.Id" data-toggle="ajax-modal" data-target="Modal" id="detailCard">Details</button>
</li>
}
</ul>
And finally the Details.cshtml (the to be opened view in the modal):
#using Core.Domain
#model Treatment
#{
Layout = null;
}
<h3>#Model.Type</h3>
<div class="modal-diaglog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailTreatmentLabel">Treatment details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>#Model.Date</p>
<p>#Model.Description</p>
<p>#Model.Employee.FirstName #Model.Employee.LastName</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Does anyone know if it is possible to open a seperate view in a modal using a hyperlink? And if not, would there be a workaround to still be able to click on the list item itself?
Thank you in advance!
You can try to call a js function when click hyperlink:
ViewComponent:
<ul class="card-list">
#foreach (var treatment in Model)
{
<li class="list-item-card">
<!-- Doesn't work: -->
<a href="javascript:Details(#treatment.Id)">
<h5>#treatment.Type</h5>
<p>#treatment.Date</p>
<p>#treatment.Employee.FirstName #treatment.Employee.LastName</p>
</a>
<!-- Does work: -->
<button asp-controller="Treatment" asp-action="Details" asp-route-id="#treatment.Id" data-toggle="ajax-modal" data-target="Modal" id="detailCard">Details</button>
</li>
}
</ul>
page js:
#section Scripts {
<script type="text/javascript">
function Details(id) {
$.ajax({
type: "GET",
url: "Treatment/Details?id="+id,
success: function (res) {
$("#Modal").html(res);
$("#Modal").modal();
}
});
}
$("#addBtn").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
$("#detailCard").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
</script>
}
I want to generate a MVC partial view with a Bootstrap 5 accordion. Here is the code:
Index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<input type="button" class="load_btn" id="1" value="Load" />
<div id="pv-1"></div>
#section Scripts
{
<script type="text/javascript">
$(function () {
$(".load_btn").click(function () {
var div_id = 'pv-' + $(this).attr('id');
$.ajax({
type: "GET",
url: "/Home/PV",
success: function (response) {
$('#' + div_id).empty();
$('#' + div_id).html(response);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
}
HomeController.cs
...
namespace WebApplication4.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult PV()
{
return View("_PartialView");
}
...
}
}
_PartialView.cshtml
#{
Layout = null;
}
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<div class="accordion" id="2">
<div class="accordion-item">
<h2 class="accordion-header" id="h-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
First Button
</button>
</h2>
<div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
<div class="accordion-body">
TO DO
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
Second Button
</button>
</h2>
<div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
<div class="accordion-body">
TO BE
</div>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
Click the "Load" button, I can get the Accordion successfully, and I can also expand each item, but then I cannot collapse the expanded items.
With another test, I put the accordion in the Index.cshtml directly (without using a Partial View ).
Index.cshtml
Exactly the same code with _PartialView.cshtml
And the Accordion works smoothly (can expand and collapse).
Could you help me on this strange behavior?
The css file and js files shouldn't be present in the _PartialView.cshtml file. The strange behavior (cannot collapse after expanded) was fixed after removing those files.
New code for _PartialView.cshtml
#{
Layout = null;
}
<div class="accordion" id="2">
<div class="accordion-item">
<h2 class="accordion-header" id="h-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
First Button
</button>
</h2>
<div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
<div class="accordion-body">
TO DO
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
Second Button
</button>
</h2>
<div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
<div class="accordion-body">
TO BE
</div>
</div>
</div>
</div>
I have tried the code in http://angular-ui.github.io/bootstrap/#/modal.
The windowTemplateUrl does not embed the data in templateUrl.Here is my plunk: https://plnkr.co/edit/6zM6VXDPjvl3yRewkNsV?p=preview
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
windowTemplateUrl: 'custom.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
update your custom.html
<div class="modal" id="myModal" ng-style="{'z-index': 1050 + index*10, display: 'block'}">
<div class="modal-dialog Signcl" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Sign Up</h4>
</div>
<div class="modal-body" ng-transclude>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
I have some strange issue. I use an carousel from bootstrap ui in a modal box from bootstrap. At the beginning is init the images for the carousel. Then i click on a button to show the modal box. This time they appear correctly. But then i reinit the carouseldata (Switch to other data) and open the carousel again and then he is empty. Is there an possible solution for this?
Here you can a example of it: http://plnkr.co/edit/YASfl9nF0cxqlytFjjI0?p=preview
Click first on click me and then you see the modal box. Close the modal box and switch from data and open it again.
<div class="modal fade" id="modal" 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 aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myTalkModalLabel">Title</h4>
</div>
<div class="modal-body">
<carousel interval="myInterval">
<slide ng-repeat="slide in getImages()">
<img ng-src="slide.image" />
</slide>
</carousel>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
var app = angular.module('plunker',['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.myInterval = 2000;
$scope.images = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4ckel17ml1bvif3lo9ki.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4c1t8t79i15qo99l1jqlj.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4davv1tplqkf24f1h4vk.jpg"];
var images2 = ["http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4dg9gqgvt6o60l8dl.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4d59tal51dkp1ask69nm.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e6st4vcoqii8r1vpgn.jpg","http://nautisme.nc/photos.nautisme.nc/201410/o_193fo6a4e184m10d46264i4buto.jpg"];
$scope.getImages = function(){
return $scope.images;
}
$scope.showModal = function(){
$("#modal").modal("show");
}
$scope.showModal = function(){
$('#modal').modal('show');
}
$scope.switchImages = function(){
var temp = $scope.images;
$scope.images = images2;
images2 = temp;
}
});
Updated Plunker
The main issue is that you're trying to use Bootstrap's jQuery-based plugins (bootstrap.js) in your AngularJS app along with UI-Bootstrap. I swapped your modal for the UI-Bootstrap modal implementation. UI Bootstrap has no dependency on the bootstrap.js, or jQuery for that matter, so I removed both from the page <head> to avoid conflicts.
Maybe it was just a typo in the Plunker but, I also needed to fix the ng-repeat in the carousel. Where you had slide in getImages(), I removed the function and referenced $scope.images with image in images. Further, since $scope.images is an array of image urls, to access them, you just use the expression: {{image}}.
<carousel interval="myInterval">
<slide ng-repeat="image in images track by $index">
<img ng-src="{{image}}" style="width: 100%;" />
</slide>
</carousel>
APP JS:
var app = angular.module('plunker',['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $modal) {
var images2 = ["http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%201", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%202", "http://placehold.it/500x300/009999/fff&text=Group%202:%20Image%203"];
$scope.myInterval = 10000;
$scope.images = ["http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%201","http://placehold.it/500x300/e8117f/fff&text=Group%201:%20Image%202"];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
imgs: function () {
return $scope.images;
}
}
});
};
$scope.switchImages = function(){
var temp = $scope.images;
$scope.images = images2;
images2 = temp;
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, imgs) {
$scope.images = imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
MARKUP:
<button class="btn btn-primary" ng-click="open()">Launch Modal</button>
<button class="btn btn-primary" ng-click="switchImages()">Switch Image Group</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Title</h3>
</div>
<div class="modal-body">
<carousel interval="myInterval">
<slide ng-repeat="image in images track by $index">
<img ng-src="{{image}}" style="width: 100%;" />
</slide>
</carousel>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</script>
I would like to use jQuery UI datepicker in a modal. The real problem is that if I want to also show years and months, it shows me empty selects:
Using firebug, it seems that the option tags are under the modal.
This is my HTML:
<div class="modal-dialog">
<div class="modal-content">
<form id="add-form" action="#" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add</h4>
</div>
<div class="modal-body">
<div class="input-group">
<div class="input-group">
<label for="date">Date</label>
<input type="text" id="date" name="date" class="form-control datepicker"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary">Salva</button>
</div>
</form>
</div>
</div>
Javascript:
$( ".datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
changeMonth: true,
changeYear: true
});
$('.datepicker').css("z-index","0");
I already tried this but it doesn't work (I have the same problem of giuseppe).
I found the solution with this answer. The only option you needed is enforceFocus.
Working Demo
jQuery
// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Only had to add this style:
<style>
.ui-datepicker{
z-index: 9999999 !important;
}
</style>
i could not get $.fn.modal.Constructor.prototype.enforceFocus = function() {}; to work becuase the 'focusin.bs.modal' event was already attached to the modal.
this is the code i got to work; because the date picker is called after the modal opens. using the beforeShow() and onClose function i was able to turn the focus event off and on
var datepicker_opts = {
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
altFormat: "yymmdd",
setDate: new Date(),
maxDate: new Date()
};
BootboxContent = function(){
var frm_str = '<form id="some-form">'
+'<div class="form-group">'
+ '<label for="date">Date</label>'
+ '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="mm/dd/yy" type="text">'
+ '</div>'
+ '</form>';
var object = $('<div/>').html(frm_str).contents();
object.find('.date').datepicker(
$.extend({
beforeShow: function(elem, inst) {
$(document).off('focusin.bs.modal');
},
onClose: function(selectedDate, inst) {
$modal = $(inst.input[0]).closest(".modal").data('bs.modal');
$modal.enforceFocus();
}
}, datepicker_opts)
);
return object
}
$('.add_date_btn').on('click', function () {
bootbox.dialog({
message: BootboxContent,
title: "View modal with date",
buttons: {
cancelar: {
label: "Cancel",
className: "btn-default"
}
}
});
}); //End click
.hidden-form #add_class_form {
display:none;
}
.ui-datepicker{
z-index: 9999999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button class="add_date_btn btn btn-primary btn-sm">View modal with date</button>