I have a dynamically created table with buttons in each row...If I click on the button a modal opens to enter the details with dark screen behind modal..On Click of accept button the modal closes and the dark screen must disappear..It disappears sometimes and not in other situations.
This is how my screen appears sometimes after click of accept button in modal
Screen that appears
: https://i.stack.imgur.com/wWnS8.jpg
<td>
<!-- for accepting -->
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<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">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message</label>
<textarea rows="3" name="message" id="message" class="form-control input-md message" ></textarea></p>
<div id="textarea_feedback_{{pl.id}}" class="textarea_feedback"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)" >Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</td>
In my Jquery:
$(document).on('click','.accept', function(e){
$(".modal-fade").modal("hide");
)}
Usually, when a modal is shown a backdrop or wrapper (dark screen) is also shown behind it.
Try removing that backdrop in your function like this:
$(document).on('click','.accept', function(e){
$(".modal-fade").modal("hide");
$(".modal-backdrop").remove();
)}
You are applying code with wrong class selector,
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
Check in above line, modal fade are two different classes. And you are using it as one in your jquery code. like this:
$(".modal-fade").modal("hide");
So try with changing it with proper class name. Here you go:
$(".modal").modal("hide");
I Have tried the above solution but after closing the popup using above method you will not be able to get popup again. When you again click on the button to show popup it will show you a black screen
Below solution works for me precisely.
$("#myModal .close").click();
$("#myModal .close").trigger("click");
Related
I'm creating a type of content management system that allows users to create pages based on templates.
I have a page that has 2 placeholder divs. Below is an example of one. When you click on the div, a modal pops up that allows the user to use TinyMCE to create content. The idea is to set the content, hit the "Get Data" button and have the modal disappear with the content from the editor now displaying inside the original div.
This is working as far as p utting the content in the div when I hit submit. The body of the modal disappears at this point, but the gray opacity screen that usually sits under the bootstrap modal is still present and I can't any longer do anything on the page. I'm wondering what I'm doing wrong here and how I can fix it to fully close the modal when I hit the submit button.
<div class="leftContent">
<div class="modal fade bd-example-modal-lg" id="leftFiftyModal" tabindex="-1" role="dialog" aria-labelledby="leftFiftyLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="leftFiftyModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data" method="post">
<textarea id="mytextarea"></textarea>
<input type="submit" value="Get Data">
</form>
</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>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
return false;
});
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
});
</script>
Try:
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
return false;
});
});
</script>
I am relatively new the web programmer so this may or may not be a solution solvable through JavaScript. If not, please point me in the correct direction.
{% for thought in user.thoughts %}
<div class="panel panel-default">
<!-- Icon to Display Modal -->
<div class="panel-heading" align="right">
Icon Here!
</div>
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action={{ "/editthought/" ~ thought.id }} method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text">{{ thought.body }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Thought Body -->
<div class="panel-body">
{{ thought.body }}
</div>
{% endfor %}
Here I am iterating through every thought associated with a user. Each thought displays a panel showing the thought with an icon to edit the thought.
When you click the icon, a modal pops up with the body of the thought. The issue I'm having is all of the modals contain the same pre-populated thought (the first one in the list).
The link (href={{ "/edit/" ~ thought.id }}) on the edit icon is correct as well as the body of the panel, however when you load the modal, it is not loading the correct thought. Any ideas?
EDIT: I can't figure out how to comment code. Following advice, I took the modal out of the for loop. I'm currently using this function to pass data from my button in the for loop to my modal.
<script>function testFun(variable){document.getElementById('thought_id').innerHTML=variable;}</script>
It's working however I can only pass information if it's formatted like this:
<h1 id="thought_id"></h1>
Is there any way to change this function so I can pass it as a string ike this:
<h1>thought_id</h1>
Again this is not the most efficient solution but would prevent you from having to pull the modal outside your loop and use JS to update your modal.
Quick fix for your links datatarget
<a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal_{{thought.id}}" data-placement="left" title="Edit">
Quick Fix to your modal id
<div class="modal fade" id="EditModal_{{thought.id}}" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
!!!!! OR GO THE MORE EFFICIENT ROUTE !!!!!
If you do go the route of moving the dialog out of for loop you can do something like below by adding a class to your links and attache a click event to them. Also add data-thought_id and data-thought_body to the link in your for loop.
jQuery:
$(function() {
$('.thought-link').click(function(event) {
event.preventDefault();
var action_path = '/editthought/' + $(this).attr('data-thought_id');
var thought_body = $(this).attr('data-thought_body');
$('#EditModal form').attr('action', action_path);
$('#EditModal textarea').text(thought_body);
$('#EditModal').modal('show');
});
});
Your new link:
Icon Here!
Your modal(outside the for loop):
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action="" method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
I am trying to achieve the following:
When the page loads, the focus goes to the first element in the form.
When the button is pressed on form, a modal appears to confirm and the focus should be on the "Proceed" button inside modal dialog.
I managed to to make the first one work, but for the second I have no idea why it is not working. Following is my code.
HTML
<form method="post" {% if action %} action="{{ action }}" {% endif %} role="form" enctype="multipart/form-data">
<!-- Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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">Confirmation</h4>
</div>
<div class="modal-body">
{{ confirm | default: "Would you like to proceed?" }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="submit-main-form" class="btn btn-primary">
<i class="fa fa-save"></i> {{ submit_text | default: "Proceed" }}
</button>
</div>
</div>
</div>
</div>
</form>
Script
/* Sets focus on the first element of the form */
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
$("#confirmationModal").on('show.bs.modal', function(event) {
// not setting focus to submit button
$("#submit-main-form").focus();
});
});
You are using show.bs.modal which Occurs when the modal is about to be shown
I believe you need shown.bs.modal event which Occurs when the modal is fully shown along when all the CSS transitions are completed.
See Bootstrap modal reference.
I want to open a modal when my input type "Verwijderen" is pressed. But it doesn't show up? What am I doing wrong? Even W3schools examples don't work in Fiddle for example. I am missing something I guess but what?
<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
type="submit"
style="width:140px;"
id="cancelForm"
class="ketchUp-default"
value="Annuleren"/>
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
<div
class="modal fade"
id="confirm-delete"
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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
Are you using BootStrap 3? I think your mistake is that you are not using the "#" ID selector in your data-target on your input. Change your input code to this:
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="#confirm-delete"/>
Here is a working plunk.
Your input is a submit, so your page is submitting the form, and the modal does not have time to be shown.
Try to convert your submit button to a simple button (not submit), and your modal will be shown.
<input
type="button"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
So I have a ASP .NET MVC application in which users should be able to add content to a page. This content can be things like a location, photos, ...
I have a dropdownlist in my View with all the different content options. When an option is selected, the page should show a modal form where they can enter details based on the type of content they selected.
My modalform is constructed like this:
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" 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">Map</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="locationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Add location</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
It's easy to fire up the modal with a button with the data-toggle and data-target attributes like this:
<p class="text-center">
<button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>
But how do I achieve this form to be shown when selecting a value from the dropdown list? I have added a JS function to the OnChange of my dropdownlist select but I don't know how to fire up the modal form.
Thanks in advance
You can load the modal using javascript on the change event of the dropdown.
Just check this link :
Bootstrap Modal doesn't show