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);
Related
I'm trying to load content into a modal using intercooler, example here:
http://jsfiddle.net/qvpy3coL/3/
I'm having no joy and wonder if this is possible, or whether the bootstrap js will conflict?
Html is:
<div id="confirm-me" class="btn btn-primary" data-toggle="modal"
data-target="#msgmodal" ic-get-from="/click" ic-target="dynamiccontent"
ic-trigger="click">
Click Me to show dynamic modal</div>
<div class="modal fade" id="msgmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Below will be dynamic content</h4>
</div>
<div id="dynamiccontent">
</div>
</div>
</div>
</div>
js is:
// mockjax stuff ...
$.mockjax({
url: "/click",
responseTime: 500,
response: function (settings) {
this.responseText = "Dynamic stuff here!";
}
});
I've never used intercooler but after a quick read it turns out there should be no problem.
The only requirement with dynamic content you want in the modal is that it should be valid HTML code.
I played with the example you put in some content:
$('#dynamiccontent').html('No, it wont have any problems as long as your placing HTML')
https://jsfiddle.net/5pe6yz0w/3/
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 have main HTML file and JavaScript file I have used modal in my project on button click the modal from another file would be shown, I have used the code but it's not working.
On button click in function search() the modal should be shown and the modal.HTML content is based according to the id passed
I am getting errors are
Uncaught TypeError: $(...).modal is not a function
at HTMLButtonElement.<anonymous> (main.js:6)
at HTMLDocument.dispatch (jquery.min.js:3)
at HTMLDocument.q.handle (jquery.min.js:3)
Here is the code
index.html
<body>
<!--some code-->
<div id="mymodal"> </div>
</body>
main.js
$(document).ready(function() {
$('.Links').on('click', '[data-toggle="modal"]', function() {
var id = $(this).attr('id');
$('#mymodal').modal('show').find('.modal-body').load("next.html?id="+id);
});
$("#submit").click(function() {
Search(search);
});
});
function Search(search) {
'<button class="button Links" data-toggle="modal" id='+id+'>See Details</button>'
}
next.html
<div id="mymodal2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Model Box</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Update:
I was having error because of not including the files properly. Now i have solved them but problem is half solved. Now when button clicked the screen became dull like when modal is shown and background became dull but in my case no modal is shown
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 use the below way to load modal content to main html:
main html:
<div class="modal modal-custom fade" id="custom-view">
</div>
.....
modal html(on a Individual html):
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-body" align="center">
<span class="section">Custom Info</span>
{% crispy form form.helper%}
</div>
</div>
</div>
I load the modal content to main html like this:
$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
$("#custom-view").modal('show');
}
}
the url is to render data on modal html
In my situation,How to change the width?
I hope this link might help. Changing modal size.
https://coolestguidesontheplanet.com/bootstrap/modal.php#myModal2
If you want to change the modal-content width, you can add modal-content width when #custom-view on click
$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
$("#custom-view").modal('show');
$('.modal-content').css({'width':'900px'});
}}
just change the class .modal-content if you want to change another class