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.
Related
I have an ASP .NET Core App, using MVC. I use a side menu to allow the user to select from choices he is allowed to have based on workflow. ie: The first time he comes in, he goes to the Home page. He can select HOME, or LOGIN. When he selects LOGIN, and an employee record is loaded. He goes to the Employee View. If at this point, he selects HOME again, I want to either:
A) Sign Him Out
B) Take Him Back to Employee View.
I thought to do this via a Modal Pop up. If Employee exists, I ask him if he wants to Sign Out. If He says YES, I will clear the Employee info and show him HOME again. If he says NO, I take him back to the Employee Page.
I can't seem to get the Modal to open based on Object state though. I have tried several of the solutions on SO, but none of them work for me. If I define a button to bring up the Modal, it works fine. But I can't get it to open based on the Employee state. Here's the current INDEX.CSHTML:
#using Microsoft.AspNetCore.Http
#using Microsoft.AspNetCore.Http.Extensions
#model dynamic
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!-- SET TO ALWAYS BE TRUE FOR TESTING -->
#if (Model.Employee != null || Model.Employee == null)
{
<script type="text/javascript">
$(document).ready(function() {
$("#exampleModal).modal("show");
});
</script>
}
<!-- Button to open the modal COMMENTED OUT FOR NOW -->
<!-- <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
Click Me!
</button> -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">What Do You Mean Go Home?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
You are currently logged into the system.
Would you like to Sign Off, or Go to Employee Page?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">EmployeePage</button>
<button type="button" class="btn btn-primary">Sign Off</button>
</div>
</div>
</div>
</div>
<!-- TEST CODE FOR MODAL BOOTSTRAP -->
<div class="container-fluid">
<div class="row">
<div class="col-2 bg-light border-right">
<!-- Navigation menu -->
#Html.Partial("_Lmenu")
</div>
<div class="col-10">
<h1>Welcome to the Timeclock System</h1>
<hr />
<div>
#if (!string.IsNullOrEmpty(Model.BZTNotes.MessageBody))
{
#Html.Raw(Model.BZTNotes.MessageBody)
}
</div>
</div>
</div>
</div>
</body>
</html>
I am using Bootstrap 5, if that matters.
TIA!
Firstly, you miss the ending " in your js code, change your code like below:
$("#exampleModal").modal("show");
Then, you miss adding the jQuery reference in your view:
<body>
#*<script src="~/lib/jquery/dist/jquery.min.js"></script>*#
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- SET TO ALWAYS BE TRUE FOR TESTING -->
#if (Model.Employee != null || Model.Employee == null)
{
<script type="text/javascript">
$(document).ready(function() {
$("#exampleModal").modal("show");
});
</script>
}
//.....
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 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'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