Node express app using EJS.
I'm creating a table - each cell has a button to trigger a modal. This code is inside a for loop:
<td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
</div>
<!-- Body -->
<div class="modal-body">
<% for(var j = 0; j < user.notifications.length; j++) { %>
<%= user.notifications[j] %>
<% } %>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products </button><br><br>
</div>
</td>
Every thing loads fine, the rendered html shows that each cell has it's own modal with it's own data but every button triggers myModal and they're all called myModal so every button loads the modal from the first cell.
Is there a way to dynamically create the div id like myModal1, myModal2, etc.?
I've tried
<div class="modal fade" id="<%=user.id%> ...>
Should I be doing this another way?
One such would be to use a single modal, but then vary the modal content based on the trigger button.
What happens is that an event is bound to the modal, which is triggered when the button opens the target modal. You can still hide the modal content inside the table, which the event will find and populate the modal body with.
Here is a simple example which you'll need to adapt to your code:
$(function() {
// when the modal is shown
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this);
// find the trigger button
var $button = $(e.relatedTarget);
// find the hidden div next to trigger button
var $notifications = $button.siblings('div.hidden');
// transfer content to modal body
$modal.find('.modal-body').html($notifications.html());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Notifications</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>
<div class="hidden">
<ul>
<li>Product one</li>
<li>Product two</li>
<li>Product three</li>
</ul>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
</td>
</tr>
<tr>
<td>Maria</td>
<td>
<div class="hidden">
<ul>
<li>Product three</li>
<li>Product four</li>
<li>Product five</li>
</ul>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
</div>
<!-- Body -->
<div class="modal-body"></div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
This concept is based on the post Multiple modals overlay
I am trying to create a folder modal, and within every folder modal the user should be able 1) open existing
or
2) create a new file modal
Please run the code below to understand how it works. You will have to click buttons and the list items for opening the modals
But this operates in a bootstrap full screen mode instead of dialog
Clicking on the button creates a folder in the list
When you click the "This is folder ###" it opens a modal as shown below
Now I could create a file
The issue is that needs to be fixed is when file item is cliked, the file modal should overlay on top of the folder modal, But now its closing and both modals wont stay.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
<script>
$("#addnewfolder").click(function(event) {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`<li class="list-group-item">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5" data-bs-toggle="modal" href="#modal-toggle-${code}">This is folder ${code}<br />
<div>
<div class="modal fade" id="modal-toggle-${code}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder ${code}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group file"></ul>
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}`).modal("show");
$(`.file-${code}`).click(function(event) {
var dcode = Math.floor(Math.random() * 10);
$(".file").append(`<li class="list-group-item">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">This is file inside ${code}-${dcode}<br />
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
<div>
<div class="modal fade" id="modal-toggle-${code}-${dcode}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}-${dcode}`).modal("show");
});
});
$(document).on('show.bs.modal', '.modal', function() {
const zIndex = 1040 + 10 * $('.modal:visible').length;
$(this).css('z-index', zIndex);
setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});
</script>
</body>
Don't stack Bootstrap modals.
Bootstrap only supports one modal window at a time. Nested modals
aren’t supported as we believe them to be poor user experiences.
https://getbootstrap.com/docs/5.2/components/modal/#how-it-works
Toggle between multiple modals with some clever placement of the
data-bs-target and data-bs-toggle attributes. Please note multiple
modals cannot be open at the same time—this method simply toggles
between two separate modals.
https://getbootstrap.com/docs/5.2/components/modal/#toggle-between-modals
Therefore toggle the modals instead of stacking them. Better UX and no need for any z-index tricks.
Your issue.
With that out of the way, the reason why the modal is closing when clicking the "Add File" button is because...
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
...you have a data-bs-target & -toggle on your button that creates a new 'file'. This will toggle modal #modal-toggle2, and since it doesn't exists on your page you get the error of an undefined modal.
You also have a few typos, like forgetting to close a <div> in a few places.
Your solution...
Appends the modal to the body, not the <li> element.
Uses the data attributes data-bs-target and data-bs-toggle to toggle the modals.
Features a "Go back to folder" button when accessing the 'file' modal.
$(document).ready(function() {
$("#addnewfolder").click(function() {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`
<li class="list-group-item" data-bs-toggle="modal" data-bs-target="#modal-${code}">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5">This is folder ${code}</div>
</li>
`);
$('body').append(`
<div class="modal fade" id="modal-${code}" tabindex="-1" aria-labelledby="modal-${code}-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-${code}-label">Folder ${code}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button class="btn btn-primary file-${code}">Add new File</button>
<ul class="list-group file"></ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
`)
$(`.file-${code}`).click(function() {
var dcode = Math.floor(Math.random() * 10);
$(this).closest('.modal').find('.file').append(`
<li class="list-group-item" data-bs-toggle="modal" data-bs-target="#modal-${code}-${dcode}">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">
This is file inside ${code}-${dcode}
<br>
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
</div>
</li>
`)
$('body').append(`
<div class="modal fade" id="modal-${code}-${dcode}" tabindex="-1" aria-labelledby="modal-${code}-${dcode}-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-${code}-${dcode}-label">File ${code}-${dcode}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Hello World</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal-${code}" >Go back to folder ${code}</button>
</div>
</div>
</div>
</div>
`)
})
})
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
If you also want the top-right close button (X) in the 'File' modal to act as going back to the 'folder' modal, simply do:
<button type="button" class="btn-close" data-bs-toggle="modal" data-bs-target="#modal-${code}" aria-label="Close"></button>
I have a table where every row can toggle a dynamic modal form to modify the content of the database bound to the row. The code is looking like this :
<tr data-toggle="modal" data-target="#Modal"></tr>
The modal shows up correctly when we click on the row. But the modal shows up when we try to highlight some content of the row too.
How can make the modal shows up only when we click the row and not when we highlight the row ? I can use Javascript and jQuery as well.
EDIT :
Here is a snippet of my code :
<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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#exampleModal">
<td>1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr data-toggle="modal" data-target="#exampleModal">
<td>2</td>
<td>Martin</td>
<td>Morris</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jsfiddle: https://jsfiddle.net/nt7hzkmw/1/
You can click on each row, it will displays the modal. But when you try to highlight some text, for example "smith" it will displays the modal form too
Javascript
var tableid;
$('tr #myModal').click(function() {
var $rows = $(this).closest('tr');
tableid = $rows.attr('id'); // table row ID
// .......
});
HTML
Table
<table>
<tr id="1">
<td><td>
<td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="fa fa-plus"></span></td>
</td>
<tr id="2">
<td><td>
<td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="fa fa-plus"></span></td>
</td>
<tr id="3">
<td><td>
<td><span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="fa fa-plus"></span></td>
</td>
</table>
Modal
<div id="myModal" class="modal fade" 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">Choose words. You can add words, delete words </h4>
</div>
<div class="modal-body">
<!-- <input type="text" value="Apple,banana,mango" data-role="tagsinput" /> -->
<div class="modal-body-inner"></div>
</div>
<div class="modal-footer">
<button type="button" id = "modelbtn" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
HTML CODE
<table border=1>
<tr onClick="toggleInfo()" >
<td>
just a dummy text
</td>
<td >
td text goes here
</td>
</tr>
</table>
Your popup model
<div style="display:none" id="model">
this is your model....
</div>
Jquery code
function toggleInfo() {
var selection = window.getSelection();
console.log(selection);
if(selection.type != "Range") {
// $("#clicktoshow").toggle();
$("#model").toggle();
}
}
I have not covered cosmetics stuff.
Hope this will helpful.
here is live example.
http://jsfiddle.net/yq810kvz/
im creating a task managment system and created a div which all tasks created by the user will append to right here:
</div><div id="ar_notes" class="ar_wrapper">
<button data-toggle="modal" data-target="#myModal" id="add_apt" ><i class="fa fa-pencil"></i></button>
</div>
and bootstrap modal that posts tasks right here:
<div id="myModal" class="modal fade" 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>
</div>
<div class="modal-body">
<ul class="rslides">
<textarea id="put_note" autofocus></textarea>
<input onClick="addmore()" data-dismiss="modal" id="add_note" type="submit" value="הוסף משימה">
</ul>
</div>
</div>
</div>
</div>
this is my script that appends my notes on to the wrapping div:
function addmore() {
var newText = $('textarea').val();
$('#ar_notes').append('<br />');
$('#ar_notes').append('<article><div class="note"><p class="show_note">' +newText +'</p><button><i class="fa fa-trash-o"></i></button>').fadeIn(500);
$('textarea').filter('[id*=put_note]').val('');
}
my question is if i can click on the div of the task and get the modal with the same text in it to edit the task?
thanks!
I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.
This is the code I'm using (and what I've tried so far)
Modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Are you sure you want to Add an Iteration?
</div>
<div class="modal-footer">
#using (Html.BeginForm("AddNewIteration", "Index"))
{
#Html.AntiForgeryToken()
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Add Iteration</button>
}
</div>
</div>
<li> in concern
<!-- Start of Add New Iteration -->
<li>
<a href="#myModal" data-toggle="#myModal">
<span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
<div class="ca-content">
<h2 class="ca-main"> Add new Iteration</h2>
<h3 class="ca-sub"> Add New Iteration to the Project!</h3>
</div> <!-- End of ca-content-->
</a>
</li> <!-- Add New Iteration -->
Thanks in advance
No Matter, I found what I was doing wrong.
Was declaring the tag wrong Had to change it to:
<a href="#" data-toggle="modal" data-target="#myModal">
I'm using angularjs. What I want to do is to check student id in database by Angularjs, when the user clicks a button.
If student id exists in database, #modal1 will be shown, otherwise #modal2 will be prompted. Is it possible to do this with angularjs? If possible how..
Html
<tr ng-repeat="g in students">
<td>{{g.studentId}}</td>
<td>{{g.studentName}}</td>
<td>
<div class="btn-group" role="group" aria-label="btnActions">
<button type="button" ng-click="act(g)" title="act" data-toggle="modal" data-target="#deleteModal"></button>
</div>
</td>
</tr>
#Modal that will be displayed
<!-- modal1 -->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
confirm delete?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="delete()">Yes</button>
<button type="button" class="btn btn-default" > No</button>
</div>
</div>
</div>
</div>
<!-- modal2 -->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Data already existed
</div>
</div>
</div>
</div>
Controller
$scope.act = function (g) {
g.studentId;
}
In controller write code
$scope.act = function(g){
/*
write code for check student is in database
*/
if(student_available == true){
$("#modal1").modal('show');
}
else{
$("#modal2").modal('show');
}
}