I realise there are similar questions on stackoverflow, however they either seem outdated(bootstrap3) or are not working for me. If possible I want to just stick to html css and javascript. I would prefer not using jquery or php.
I'll keep my code very general. I have my mainscreen which has a button I need that button to call a modal from ModalPage. ModalPage only has that modal with no other code. I'm using flask-python as my backend.
Mainscreen
<button type="button" class="btn btn-primary btn-lg">This should call modal/button>
ModalPage
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have tried using url_for and rendering it using <a> but that doesn't seem to be working
You might have to store the entire modal HTML in a variable within your Python Flask code. One way (out of quite a few number of ways) would be to read the text and store the html in a variable using:
modaltext=[]
with open('ModalPage.html', 'r') as f:
content = f.read()
modaltext.append(content)
Put this above code in your views.py preferably. That filename depends on where you have stored the ModalPage.html. Here I assumed, it is in the same folder as views.py (which might not be the case. It could be in templates, but I dunno your folder structure).
And modify your return render statement to also return the modaltext list.
Then, call it to your Mainpage HTML using jinja2 syntax wherever necessary. Typically it could be like:
<div>{{ modal }}</div>
I'm honestly not sure about the python/flask portion, but I do what you are attempting using only html/js. You could add an ID to the button, i.e 'modal-form-button'. Then make an event listener in JS for the element with that ID being clicked.
document.getElementById("test-btn").addEventListener("click", showModal);
The showModal() function can contain the necessary code to toggle the display of the modal between 'display:bloack' and 'display:none'
Related
I have five different modal forms with their js that are shown when their corresponding button is being clicked, which is messy to put all modals and other content in one blade file.
I want to have only one blank modal on the page which will be filled by content related to its button clicked. Is there any way I can put my five different modals form content in five different blade files and when its button is clicked on the main page I get the content from the related modal blade file and fill it in the blank modal and load its js?
Yes you can.
In your controller imagine you have a method named create and you want to put its response into the modal body.
<?php
namespace App\Http\Controllers;
class SomeController extends Controller{
public funtion create(){
$someVariable;
$view=\View::make::('directory.your_blade_file',compact('someVariable'));
return ['html'=>$view->render()];
}
}
And now in your client side code you can act like this.
Notice: I assume you use jQuery ajax to get data from server and bootstrap modal to show content
<div class="modal" id="single-modal-in-the-page" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<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-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
<script>
$(function(){
$('#some-button').on('click',function(){
var modal=$('#single-modal-in-the-page');
$.ajax({
type:"GET",
url:'http://url/some/create',
data:{/*any query string paramteres can be set here*/},
success:function(response){
modal.find('.modal-body').html(response.html);
modal.modal('show');
},
error:function(error){
// Or handle the errors in your own way
console.log(error);
}
});
});
});
</script>
I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
Large
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
I want to trigger the modal on page load instead of button click. How can I do this?
if you're working with Bootstrap (then I also assume you're using jQuery), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard.
I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" 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">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong
I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.
Good day, I am currently trying to do something extremely simple, to let a modal window appear on a click of a button in Meteor.
So I created a JS file on the lib folder called Sessions where I wrote this code
if (Meteor.isClient){
Session.setDefault('showAhorroGen',false);}
Which first allows me to set the Session as false as a default and when I click it , it will become true and show the dialog.
So then in my client folder I created an event to hear for when the button is clicked, and a helper to return the session.
Template.menu.events({
'click .ahorro': function(event,tmpl){
Session.set('showAhorroGen',true)
}
});
Template.products.helpers({
showAhorroGen : function(){
return Session.get('showAhorroGen');
}})
In my HTML I added the following code, to render the template with the modal if the session showAhorroGen is true.
<h3> Cálcula tu ahorro gratis <button type='button' class='btn btn-danger ahorro'>Aquí</button></h3>
</div>
{{#if showAhorroGen}}
{{> ahorroGen}}
{{/if}}
and finally the template, for testing reasons is only the bootstrap modal example
<template name='ahorroGen'>
<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">
<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">
...
</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>
</div>
</div>
</div>
</template>
Why does the modal window does not appear?
The problem is that now you've written code that dynamically inserts the HTML code for the modal, but in Bootstrap, you need to activate the modal in order to show it, for example by executing the following JavaScript code: $("#myModal").modal().
EDIT
The easiest way to solve it is by adding the following piece of JavaScript code:
Template.ahorroGen.onRendered(function(){
$("#myModal").modal()
})
Looks like you're targeting the wrong template with your event, and helper definition.
You're currently targeting the "menu" template in your event, and the "product" template for the helper. These should both be targeting the same template.