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>
Related
I'd like to have a Bootstrap Offcanvas displayed, and still be able to interact with the rest of the page without getting the Offcanvas closed. Is this possible? None of these examples address that: https://getbootstrap.com/docs/5.2/components/offcanvas/.
You could use an offcanvas with a static backdrop and add this CSS rule to hide the backdrop :
.offcanvas-backdrop {
display: none;
}
.offcanvas-backdrop {
display: none;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<button class="btn btn-danger" type="button" onclick="alert('clicked!')">You should not be able to click me</button>
</div>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
I need to pass a Model to a partial view. I first pass a value of ID, then I get the Model I need based on that ID.
The scenario: I have a table with a delete button in each row. I need to display a confirmation bootstrap modal that includes a Model.
The problem, it's not working and I don't know if there another way to do that or not
In the section of javascript BPCategoriesId not recognized
Here is my code attempt.
Delete Button
#foreach (var item in Model.BPCategories)
{
...
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-bs-toggle="modal" data-bs-target="#exampleModal">
Delete
</button>
...
}
Bootstrap Modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="ModelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
<!--<partial name="Delete" model="#Model.BPCategories.Where(id => id.Id == returnID()).FirstOrDefault()" />-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let BPCategoriesId = btn.dataset['id'];
var jsonModel = #Html.Raw(Json.Serialize(#Model.BPCategories.Where(id => id.Id == BPCategoriesId).FirstOrDefault()));
$("#ModelLoad").load('#Url.Action("Delete", "BootstrapCategories")', jsonModel);
});
}
});
</script>
#model LoadPartialView.Models.TestViewModel
#foreach (var item in Model.BPCategories)
{
<p>
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
</p>
}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="modelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let bpCategoryId = btn.dataset['id'];
$("#modelLoad")
.load('#Url.Action("Delete", "BootstrapCategories")', {
bpCategories: JSON.parse('#Html.Raw(Json.Encode(Model.BPCategories))'),
bpCategoryId: bpCategoryId
});
});
}
});
</script>
}
Demo is pushed to GitHub.
Why does this popover ONLY appear below the button when the code instruction is for right placement? The next few sentences are only to "add more details" for question to go through.
new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
$(document).ready(function() {
$(".name-button").click(function(event) {
$('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
});
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--Modal Trigger Buttons -->
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
<!-- The Modal Itself -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger example-popover" **data-bs-placement="right" ** data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Because you haven't left room in your layout for right side placement. The Popper library attempts to use your preference, and if it doesn't fit it goes elsewhere per the algorithm in the library so the user can actually see it.
Here I've moved your button to a better place and it works as expected. Note that you can specify a fallback position yourself with the fallbackPlacement property. Read more
new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
$(document).ready(function() {
$(".name-button").click(function(event) {
$('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
});
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<button type="button" class="btn btn-lg btn-danger example-popover" **data-bs-placement="right" ** data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<!--Modal Trigger Buttons -->
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
<!-- The Modal Itself -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Today I came across with this, I tried doing what was in the project and came across with the OP's problem about the full screen modal. I saw a solution below about about cutting the div and pasting it in an outer div.
I did what was in the solution but what happens is that the full modal div is retained and the normal popup shows.
If I add it to the script, no popup shows but backdrop changes.
How do I solve this? Thanks in advance
UPDATE
PARENT VIEW BUTTON
<button type="button" class="btn btn-success btn-sm modal-link" data-targeturl="#Url.Action("_Popup","Application",new { MotorId = item.motor_id, Serialno = item.serialno, AppNo = item.application_no, Remarks = item.remarks })"> View
</button>
PARENT MODAL
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
X
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
SCRIPT
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">' + '<div class="modal-content" id="modalbody" >' + data + '</div></div>').modal();
});
});
});
PARTIAL VIEW
#model iVehicle.ViewModel.FranchiseViewModel
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Some content here</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>
The data-dismiss in bootstrap is not working. It is working in another project but not in this project. Please suggest me where I am going wrong.
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.TextBoxFor(m => m.txtName)
<button type="submit" id="submit" data-toggle="modal" data-target="#myModal">Produce Page</button>
}
//My Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
...
<div class="modal-header">
...
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Go to My Home</button>
</div>
</div>
You can try this snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> #using (Html.BeginForm("Index", "Home", FormMethod.Post)) { #Html.TextBoxFor(m => m.txtName)
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> }
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<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>
Bootstrap modal with Pure Javascript
(function() {
"use strict";
var Modal = function(el, options) {
var self = this;
this.el = document.querySelector(el);
this.options = options;
try {
var list = document.querySelectorAll('#' + this.el.id + ' [data-dismiss="modal"]');
for (var x = 0; x < list.length; x++) {
list[x].addEventListener('click', function(e) {
if (e) e.preventDefault();
self.hide();
});
}
} catch (e) {
console.log(e);
}
};
/**
* Methods
*/
Modal.prototype.show = function() {
var self = this;
// adding backdrop (transparent background) behind the modal
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop === null) {
backdrop = document.createElement('div');
backdrop.id = "bs.backdrop";
backdrop.className = "modal-backdrop fade in";
document.body.appendChild(backdrop);
}
}
// show modal
this.el.classList.add('in');
this.el.style.display = 'block';
document.body.style.paddingRight = '13px';
document.body.classList.add('modal-open');
};
Modal.prototype.hide = function() {
var self = this;
// hide modal
this.el.classList.remove('in');
this.el.style.display = 'none';
document.body.style = '';
document.body.classList.remove('modal-open');
// removing backdrop
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop !== null) document.body.removeChild(backdrop);
}
};
/* Event */
document.addEventListener('DOMContentLoaded', function() {
var m = new Modal('#MyModal', {
backdrop: true
});
document.getElementById('btn-open').addEventListener('click', function(e) {
if (e) e.preventDefault();
m.show();
});
});
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> #using (Html.BeginForm("Index", "Home", FormMethod.Post)) { #Html.TextBoxFor(m => m.txtName)
Click Me }
<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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>