I'm working on repeated divs that there are some changes within them. Let say I have some buttons on my page that open a modal dialog when being clicked. However, the content within the modal is a bit different for each button. I mean 80% of what inside the modal is repeatedly used across those button and the remaining 20% changes according to each specific button.
I'm tired of duplicating the whole div (modal) and making just small changes to fit each button because I currently have 24 buttons on the page and the number is increasing in the near future.
So, I'm asking if there's an excellent way to cope with this issue. Thank you all.
ps. Sorry if I'm not so clear in explaining the problem. Just a newbie here lol.
Point all of the buttons to a template modal, and then when a button is clicked, modify the template modal with the dynamic information. You can store the dynamic information in an array of objects, or you could create a system for storing the dynamic information in the HTML, but hidden.
For example:
var contents = [{
title: "Header 1",
body: "Body 1"
},{
title: "Header 2",
body: "Body 2"
}];
$("button[id^=modal]").click(function() {
var content = contents[this.id.substring(5) - 1]; // id gives index of content in array
$("#myModal .modal-title").html(content.title);
$("#myModal .modal-body").html(content.body);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button id="modal1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 1</button>
<button id="modal2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 2</button>
<div id="myModal" 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"><!--Template Title--></h4>
</div>
<div class="modal-body"><!--Template Body--></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JSFiddle
Related
I have been trying to get this working for hours, including many of those hours searching stackoverflow and elsewhere on google.
I'm using a rather strange setup via wordpress to iterate a number of bootstrap modals with an HTML anchor value associated with a booth number variable. I have a table with some javascript that, if there is a booth number within a given div, triggers a modal. Generally it's working great, except for one issue:
some of these modals have an id value with a comma seperated list. This isn't something I can structurally change right now, so i'm trying to get comma separated values to play nicely with the javascript and grid container i have set up.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".container1 > *[data-location]").click(function() {
var booth = "#" + jQuery(this).data("location");
jQuery(booth).modal({ show: false});
jQuery(booth).modal('show');
console.log(booth);}); });
here's a small chunk of my grid container:
<div class="k10" id="k10" data-id="k10" booth-number="710" data-location="710">710</div>
<div class="k11" id="k11" data-id="k11" booth-number="611" data-location="611">611</div>
<div class="k12" id="k12" data-id="k12" booth-number=""></div>
<div class="k13" id="k13" data-id="k13" booth-number="610" data-location="610">610</div>
<div class="k14" id="k14" data-id="k14" booth-number="511" data-location="511">511</div>
<div class="k15" id="k15" data-id="k15" booth-number=""></div>
<div class="k16" id="k16" data-id="k16" booth-number="510" data-location="510">510</div>
<div class="k17" id="k17" data-id="k17" booth-number="411" data-location="411">411</div>
<div class="k18" id="k18" data-id="k18" booth-number=""></div>
<div class="k19" id="k19" data-id="k19" booth-number="410" data-location="410">410</div>
<div class="k20" id="k20" data-id="k20" booth-number="311" data-location="311">311</div>
and a couple example pieces of my modals:
<div id="613" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="613">
<div id="710, 712" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="710, 712">
the first example being a working one, and the second a non-working one... I am slowly going mad trying to figure this out, i'd love any help y'all can give!
712"` using like this is totally not recommended. You need to create custom classes to particular modals and to the buttons where you trigger them. Just try below snippet you will more clear on it.
$(document).ready(function(){
$(".btn").click(function(){
var modalID = $(this).attr('data-id');
$("."+modalID).modal('show');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<button type="button" data-id="709" class="btn btn-sm btn-primary">709</button>
<button type="button" data-id="710" class="btn btn-sm btn-primary">710</button>
<button type="button" data-id="712" class="btn btn-sm btn-primary">712</button>
<div class="modal fade 710 712" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">710 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
<div class="modal fade 709" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">709 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
</div>
i'm looking to open a modal using bootstrap 4. If I check the documentation, this is working fine.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But in fact I would like to call the modal from a different page. It means myModal should not be on the same page than the button. But all I tried failed.
Do you have any idea ? Thanks
Moreover I would like to use a link with <a href=....></a> instead of button.
To be more specific; here ic what I really have, (was working with bootstrap 2 and I try to make it work with bootstrap 4) but it's not working or at least not as expected.
Page 1
<a class="btn btn-mini btn-info avia-modal" href="PAGE_MODAL_URL"></a>
js side
$(".avia-modal").click( function() {
ouvrirModal(this);
$("#idurl").val($(this).attr('rel'));
} );
/**
* Fonctions popup modal
*/
function ouvrirModal(elt){
href = $(elt).prop("href");
$('#aviaModal').modal();
$('#aviaModal iframe.modal-body').prop("src", href);
$('#aviaModal iframe.modal-body').removeClass("d-none");
$('#aviaModal div.modal-body').addClass("d-none");
}
/**
* itialisation modal
*/
function initModal(btnSave){
if(btnSave){
$("#aviaModal .avia-btn-save").removeClass("d-none");
$("#aviaModal .avia-btn-save").click( function() {
window.frames["iframemodal"].window.saveAction();
});
}
}
/**
* Réinitialisation modal
*/
function resetModal(){
$("#aviaModal .avia-btn-save").addClass("d-none");
$('#aviaModal').modal('d-none');
}
$(document).ready(function(){
parent.$("#aviaModal .modal-header h3").html("Historique");
parent.$("#aviaModal").addClass("modal-historique");
});
Why don’t you iframe a pop up window with the desired page you want to output.
One way to do it is to link to a page that executes a javascript on a certain condition, that opens the modal for you.
Another way is to create a single page application using React, Angular or Vue.
From a UX-perspective however, nobody will expect to change a page as well as open a modal. Probably there are ways that are easier and more common in their approach.
I was looking for a solution to my problem and I saw a lot of different ways to do that but none of them worked to me.
I'll paste my code here and see if you can help me somehow.
I have a draggable popup to display a note. There is a list of items on the main screen and everytime the user clicks on the "View" link it opens the popup with the Note for this specific item.
Everything is working properly. The popup opens with the right information and I can move the popup around the screen. Then only problem I have is:
Once I close the popup and open a new one, instead of reseting the popup to the original position it opens exactly where I left the other one. I need to reset the position for the popup when the user closes it.
This is my js:
require(['jquery'
, 'bootstrap'
, 'datepicker'
, 'typeahead'
, 'combobox'
, 'tagsinput'
], function($){
// DOM ready
$(function(){
$('.modal-dialog').draggable();
$('#noteModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var note = $(e.relatedTarget).data('note');
//populate the textbox
$(e.currentTarget).find('span[name="note"]').text(note);
});
});
});
This is the modal on my html page:
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I reset the position for the popup everytime the user closes it?
THank you!
Inside your click handler, you can use JQuery to set the css of the modal like so:
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
This will reset the position of your modal. You can use it before you call your modal in your JavaScript, assuming you are using JS to open your modal.
Try running the snippet below or see this CodePen Demo for an example of this using your modal.
// DOM ready
$(function() {
$(".modal-dialog").draggable();
$("#btn1").click(function() {
// reset modal if it isn't visible
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
$("#noteModal").modal({
backdrop: false,
show: true
});
});
$("#noteModal").on("show.bs.modal", function(e) {
var note = $('#btn1').data('note');
$(e.currentTarget).find('span[name="note"]').html(note);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="btn1" data-note="I am a note. Hello.">Show Modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you want to keep the background usable while your modal is open, I posted a solution to this a little while ago here.
I hope this helps!
I saw a lot of subject but I still dont have my answer.
Situation : I have a link which open a modal popin
<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe" >
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe" >
and i have my js
$('#myModalAnnexeDe').on('show.bs.modal', function (event) {
var filtre=$(event.relatedTarget).attr('data-filtre');
alert($(event.relatedTarget).attr("data-filtre"));
if(filtre == 'oui'){
$('.notform').hide();
}
});
result of the alert is 'undefined'
I also try :
$(event.relatedTarget).attr('data-filtre')
$(event.relatedTarget).data('filtre')
$(event.relatedTarget).data($('a'),'filtre')
$(event.relatedTarget).data(a,'filtre')
$(event.relatedTarget).attr(filtre)
$(event.relatedTarget).attr('filtre')
$(event.relatedTarget).dataset.filtre
$(this).attr("data-filtre")
...
And maybe many others...
about show.bs.modal & event.relatedTarget from bootstrap doc :
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is
available as the relatedTarget property of the event.
thanks in advance.
It works just fine with your code only. check your jQuery Version compatibility with bootstrap version first.
And for the reference purpose I have also provided working code with a simple changes in your code like tag completion and added bootstrap modal and jquery link.
$('#myModalAnnexeDe').on('show.bs.modal', function (event) {
var filtre=$(event.relatedTarget).attr('data-filtre');
alert($(event.relatedTarget).attr("data-filtre"));
if(filtre == 'oui'){
$('.notform').hide();
}
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe">non</a>
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe">oui</a>
<!-- Modal -->
<div id="myModalAnnexeDe" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I tried again a lot of thing and still didn't work with the show.bs.modal event.
So I just did
$('.lienfiltre').on('click', function (){
if($(this).attr('data-filtre') === 'oui'){
$('.notform').hide();
}
});
and here it's working.
ty
I have a modal with a large content in it.
So I want the modal be the max-hight of my window and the content should be scrollable within the modal.
This is what my modal is right now:
<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Error Log: {{ log_name }}</h4>
</div>
<div class="modal-body">
<pre>
{{ log_content }}
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" ng-click="clear_log( )"><span class="glyphicon glyphicon-trash"></span></button>
<button type="button" class="btn btn-default pull-left" ng-click="refresh_log( )"><span class="glyphicon glyphicon-refresh"></span></button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Thank you.
With pure CSS it's not possible, you can achieve the dynamic height of modal according to window size with following piece of script with suggested answer CSS in comments;
Script
$('#myModal').on('show.bs.modal', function () {
$('pre').css('height',$( window ).height()*0.9);
});
CSS
.modal-body {
overflow-y: auto;
}
Fiddle
Note: You have to adjust the height and may be the target class which you want to be with dynamic height, in example I target pre you can also try with $('.modal-body').css('height',$( window ).height()*0.9); which ever suits your need and according to design.
Or you can totally remove CSS suggested above and set the height in JS like as follow;
$('pre').css('height',$( window ).height()*0.6);
For Remote Modals
With remote modals above solutions will not work so with remote modals if you want to adjust the height of the selector e.g modal-body then following script and CSS can do the trick with bootstrap modal loaded event
$('#myModal').on('loaded.bs.modal', function () {
$('pre').css('height',$( window ).height()*0.6);
});
CSS
.modal-body {
overflow-y: auto;
}
Bootstrap Modal events Functions