HTML
<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Calculating...
</div>
<div class="modal-body">
<div id="spinner"></div>
</div>
</div>
</div>
</div>
Javascript
var dialog = $('#pleaseWaitDialog').modal({
keyboard: false,
backdrop: 'static',
show: false
});
//A checkbox
$('body').on('change', '.Foo', function () {
dialog.modal('show');
//Updates a Highchart using this.checked and this.id
dialog.modal('hide');
});
Above is a piece of code that allows me to update a highchart on click of a checkbox belonging to class Foo. During updating, it pops up a modal, updates the highChart and closes the modal. The problem is, just before the modal opens, the body auto-scrolls to the top of the page, which I do not want to happen. What am I doing wrong?
Related
I'm displaying a MVC Partial View inside a Bootstrap Modal by clicking a button. My setup is like this:
Modal
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body" id="Preview">
#*PartialView*#
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
$.ajax({
type: "Get",
url: '#Url.Action("PartialViewTitle", "Controller")',
data: {},
success: function (data) {
$('#Preview').html(data);
$('#myModal').modal('show');
}
});
}
</script>
In my Controller I have defined a method PartialViewTitle() which returns the Partial View. I have a button, where onclick= links to the Open() function.
The problem is that the content of my partial View is displayed on the left side of the modal and on the right is blank space. I would like to have the size of my modal adapted to its content and the content to be centered. What is the best way to do this?
Thank you in advance!
To get the content centered you just have to add align-self-center as follow:
<div class="modal-body align-self-center" id="Preview">
To adapt size, you can use css display: inline-block; please take a look to the following article:
Bootstrap Modal Dynamic Width
In your .cshtml view use
<div id='myModal' class='modal hide fade in' data-url='#Url.Action("PartialViewTitle","Controller")'>
<div id='ModalContainer'>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
var url = $('#myModal').data('url');
$.get(url, function(data) {
$('#ModalContainer').html(data);
$('#myModal').modal('show');
});
}
</script>
If it doesn't work then need to add styles.
Try using $('#Preview').append(data); instead of $('#Preview').html(data);
I have a bootstrap modal v3.2.0, which shows on page load. It is being used as an age verification pop up.
I am looking for a way to close this modal if a condition has been met. Basically, when the user clicks a button, I want it to close but I also want to ensure that the modal does not appear again on page load after clicking that button.
Here is the code
$(window).load(function(){
$('#myModal').modal('show')
});
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This code works to successfully load the bootstrap modal on page load and closes the modal when you click on the close button however the modal will still appear again on page load. As I am not very strong with Javascript, I am not certain how to go about a conditional or if statement. So far I have the bare bones:
if (condition) {
$("#myModal").modal('hide');
} else {
// block of code to be executed if the condition is false
}
Inside the original if statement should be if the close button has been clicked. It should also prevent the modal from auto loading again. Maybe I don't even need the else statement.
Their might even be a better option I haven't considered. Any help much appreciated.
$('#myModal').modal('show')
$('#over18').on('click', function (e) {
$('#myModal').modal('hide')
});
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
For additional clarity, if I use the following code, when you click the button it does show the alert, so the javascript and code is working for that, it simply won't work when using the bootstrap: $('#myModal').modal('hide');
$('#over18').on('click', function () {
alert('Hello!');
});
So after some more playing around, the following code will auto open the modal, when the over 18 button is clicked it will be closed, and an alert will appear to say the modal is about to be hidden. I done this to make sure the javascript was working.
The line that is calling the alert is where I should be putting the localstorage line to ensure the modal does not show again. However this does not work.
$("#myModal").modal("show");
$("#over18").click(function(){
$("#myModal").modal("hide");
});
$("#myModal").on('hide.bs.modal', function(){
alert('The modal is about to be hidden.');
});
You could try something like this, to decide whether to show the modal:
// On initial page load
if (localStorage.getItem('age-verified') !== true) {
$("#myModal").modal('show');
}
Then, if the modal shows - do something like this:
// Upon the age being confirmed
$('#footer-close').on('click', function() { // This is for illustration - handle the close event on the modal however you choose
$("#myModal").modal('hide');
localStorage.setItem('age-verified', true);
});
Updated - based on new code you posted
I've managed to create a working example for you. The script tags in your HTML document need to be in the same order as below. Bootstrap relies on jQuery - so that needs to be declared first.
Also to note - if you try running this example in StackOverflow's code snipped editor, it won't work - as code snippets are sandboxed, and don't have access to localStorage. You should be able to run it locally on your own computer though.
if (localStorage.getItem('age-verified') !== true) {
$('#myModal').modal('show');
$('#over18').on('click', function (e) {
$('#myModal').modal('hide');
localStorage.setItem('age-verified', true);
});
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Your page content here</h1>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
You can refer to the official bootstrap reference guide to do this depending on what version of bootstrap you are using. See Reference
I'm working on this bootstrap modal right now, but ran into a problem..
for the modal, I pass the modal data using jquery like this
<script>
$(function()
{
$('#exampleModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget);
offer = button.data('offer');
modal.find('.modal-body .placeoffer h5').text(offer);
});
});
</script>
It gets compensated in the div like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<style>.close {position:absolute;top:10;left:10;}</style>
<div class="modal-body">
<div class="placeoffer"><h5 align="right"></h5</div>
</div>
</div>
</div>
</div>
</div>
Now my question is, I send the offer text with html tags, but instead of rendering the html tags, they show up as raw data, how can I make them get parsed?
Try html(offer) instead of text(offer)
\o/
I am having a Modal which opens up on a button click. In this Modal, a button uses ng-click to call a function from js file.The function doesn't get called, with no errors.
Outside the Modal the ng-click is working properly.
<div class="container-fluid" ng-app="app" ng-controller="GridCtrl">
....
<div id="partial"></div>
</div>
function openModal() {
jq.get('/Data/openModal?Id=' + Id, function (data) {
jq('#partial').html(data);
jq('#Modal').modal('show');
});
}
Partial Page :-
#model Models.Data
#{
Layout = null;
}
<div class="modal fade bs-example-modal-lg" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="compModalLabel">Master</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-sm-12">
<button type="button" ng-click="getData('live')">Live Data</button>
</div>
.....
</div>
var app = angular.module('app', ['ui.grid']);
app.controller('GridCtrl', ['$scope', function ($scope) {
$scope.getData= function (status){
.....
}
}
]);
What is the solution?
See here: Add DOM Elements (that are Angular directives) via jQuery .append()?
You need to have the newly added DOM elements compiled by Angular, with $compile(...)
(Although a more pure AngularJS codewould be better overall, you are mixing JQuery and NG.
http://angular-ui.github.io/bootstrap/#modal)
HTML:
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-vertical-centered">
<div class="modal-content col-lg-pull-3 col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="modal-body" id="modaltext">
Hello!!!!!!!!!
</div>
</div>
</div>
</div>
JS:
if(a==81)
{
$("#myModal").css("display" , "block");
}
modal window should display automatically when the condtion is true. it should not display when the button/div is clikced
I mostly do it this way, i send ajax call and on success i do something like this:
Add an anchor tag and pass ahref the modal div id like #myModal in your case hide it like this:
<a id="modalTrigger" href="#myModal" style="display:none;">dummy</a>
put your condition and click anchor tag programmatically:
if(a==81)
{
$("#modalTrigger").click();
}
try something like this
if(some_condition){
$('#myModal').modal('show');
}