So I am creating a simple version of the mcdonald's site as a part of a project that I am doing, and in that, I need to add a modal that displays a map on the click of a button. However, when I add the modal, the positions of the elements that are already in place are disturbed.
I am trying to figure out how to add to modal without having the other elements move, but I cannot seem to figure it out.
The modal is supposed to show up with the click of the button with the class "location".
I have included the code snippet and screenshots to let you know what the project was like before and after the modal, to let you see what I mean by the positioning being disturbed.
Here is code that the problem occurs with:
#import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Graduate&family=Shadows+Into+Light&display=swap');
*{
margin:0;
padding:0;
}
html,body{
width:100vw;
height:100vh;
overflow-x: hidden;
}
.container nav{
width:100vw;
height:15vh;
display:flex;
align-items:center;
justify-content: space-between;
background:red;
}
nav img{
width:6vw;
height:auto;
margin-left:3vw;
}
nav #button{
padding: 1.8vh 2vw;
margin-right:4vw;
background:linear-gradient(to right, gold, yellow);
border:.1px solid black;
border-radius:0.390625vw;
color:black;
font-family: 'Crimson Text', serif;
font-weight:normal;
font-size:1.125vw;
}
nav #button:hover{
background:linear-gradient(to right, goldenrod, rgb(161, 161, 0));
}
.container .orderbar{
width:100vw;
height:13vh;
background:rgba(0,0,0,.8);
display:flex;
justify-content: space-between;
font-family:'Shadows Into Light',cursive;
}
.orderbar #fafaicon{
font-size:2.109375vw;
color:#999999;
vertical-align: center;
margin-top:4vh;
}
.orderbar #fafaicon:hover{
color:white;
}
.orderbar a{
text-decoration:none;
}
.icon{
color: #999999;
font-size: 2.109375vw;
font-weight: 400;
font-family: 'Shadows Into Light',cursive;
background:none;
border:none;
}
.icon:hover{
color:white;
}
i{
padding-left: 3vw;
}
i span{
font-family: 'Shadows Into Light',cursive;
margin-left:.5vw;
}
.orderbar .right{
margin-right:4vw;
}
.orderbar .location{
padding: 1.6420361247947455vh 1.953125vw;
font-family: 'Graduate',cursive;
}
.location{
font-size:1.328125vw;
margin-top:-2vh;
border-radius: 1.796875vw;
background: rgba(0,0,0,.1);
color:#999999;
border: 1px solid #999999;
}
.location:hover{
background-color: #999999;
color:black;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>McDonald's</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Clickable Map Modal-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.2/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<!--Ad Swiper-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav>
<img src="/Assets/McDonalds.png"/>
<button id="button">Sign In</button>
</nav>
<div class="orderbar">
<div class="left">
<a href="#">
<span class="link">
<button class="icon">
<i class="fa fa-truck" id="fafaicon"><span>Delivery</span></i>
</button>
</span>
</a>
<a href="#">
<span class="link">
<button class="icon" >
<i class="fa fa-shopping-bag" id="fafaicon"><span>Takeout</span></i>
</button>
</span>
</a>
<a href="#">
<span class="link">
<button class="icon">
<i class="fa-solid fa-plate-utensils" id="fafaicon"><span>Dine-In</span></i>
</button>
</span>
</a>
<a href="#">
<span class="link">
<button class="icon">
<i class="fa-solid fa-receipt" id="fafaicon"><span>Menu</span></i>
</button>
</span>
</a>
</div>
<div class="right">
<button class="location" data-toggle="modal" data-target="#map">Our Location</button>
<button class="icon" href="#"><i class="fa fa-search" id="fafaicon"></i></button>
<button class="icon" href="#"><i class="fa fa-cart-shopping-fast" id="fafaicon"></i></button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="map" 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">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3507.9651108961293!2d-81.47361158255616!3d28.450468100000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e77e5534ccb6bb%3A0x7e45cfcb49c75afa!2sMcDonald's!5e0!3m2!1sen!2sca!4v1661213105618!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Project Screenshots
Notice how there is no whitespace and everything lines up with the edges:
Before
Notice the space on the left:
After
Related
iframe in bootstrap card scales with width but not height how do I make the height responsive as well?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4" style="width: 100%;">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" style: width="100%" height="100%" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
From the bootstrap documentation: (https://getbootstrap.com/docs/5.2/helpers/ratio/#example)
Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.
I also removed the unneeded (hardcoded) width/height attributes.
See sample code below:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4">
<!-- changes made from here -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
<!-- to here -->
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
To test modal creations in python with django I created a test app named modalTestApp.
Then I copied this html that I got off of the bootstrap website and pasted it into the main.html inside the app, without changing it. The webpage from the app loads fine but clicking the button to preview the modal does nothing. What am I doing wrong here?
main/base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<script src={% static "jquery/jquery-3.3.1.slim.min.js" %}></script>
<script src={% static "jquery/jquery.min.js" %}></script>
<script type="text/javascript" src={% static 'tablesorter-master/js/jquery.tablesorter.js' %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/popper.min.js" %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/bootstrap.min.js" %}></script>
<style type="text/css">
.main {
margin-top: 50px;
padding: 10px 0px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href={% static "bootstrap-4.3.1-dist/css/bootstrap.min.css" %}>
<title>{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-dar bg-dark pb-0 pr-0">
<ul class="nav flex-row">
<p class="navbar-brand mb-0 pt-0" style="color: #eee">Weather Data</p>
Home
{% if user.is_authenticated %}
Stations
{% endif %}
</ul>
<ul class="nav justify-content-end">
{% if not user.is_authenticated %}
Register
Login
{% else %}
logout
Profile
{% endif %}
</ul>
</nav>
{% block content %}
{% endblock content %}
</body>
</html>
main.html:
{% extends "main/base.html" %}
{%block content %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</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">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock content %}
EDIT:
console output + webpage preview (same before and after button clicked):
I think that you do not need to write the script tag, you need to write how it is done in the bootstrap documentation - https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
Just as example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
You also need to see the django documentation on how to insert static files, this will help you use your pictures, styles, javascript - https://docs.djangoproject.com/en/3.2/howto/static-files/
Also, just as example
settings.py (Root setting)
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = "/static/"
STATICFILES_DIRS = [str(BASE_DIR.joinpath("static"))]
urls.py (root urls)
urlpatterns = [
path("admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
It seems like the problem is the template file is not fetching right css and js or may be your directory is not correct. Check my code below its working fine. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I need to dynamically change image background-image css from home page in django cms, but is imposible.
home
CSS CODE
The css has the welcome-image-area class the user needs to change the image url in the cms.
.welcome-area {
height: 100%;
}
.welcome-image-area {
position: relative;
height: 100%;
background-image: url(../images/bg/bg.jpg);
background-size: cover;
z-index: 1;
}
.welcome-image-area:after {
position: absolute;
background: rgba(0, 0, 0, .7);
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
HTML CODE
base.html
<div id="welcome-image-area" class="welcome-image-area" data-stellar-background-ratio="0.6" >
<div class="display-table">
<div class="display-table-cell">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header-text">
<h2>{% static_placeholder 'mensaje bienvenida' %}</h2>
<p>{% static_placeholder 'sub mensaje bienvenida' %}</p>
<a class="smoth-scroll hire-us-slide-btn" href="#service">Servicios <i class="fa fa-hand-pointer-o btn-hire-us" aria-hidden="true"></i></a>
<a class="slide-btn smoth-scroll" href="#contact">Contactanos <i class="fa fa-hand-pointer-o btn-contact-us" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In those cases I would recommend to utilize the "style" attribute as following:
<div class="welcome-image-area" style="background-image: url({{ instance.image.url }})"></div>
I want to develop image gallery. I want to present each image and its description under it and when I click on an image or text or white space got "modal"
I wrote this for an element in gallery
<div class="m-4 img99">
<a href="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="..." data-toggle="modal" data-target="#ml">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
The modal part is
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
and CSS part
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
My problem is when I click on a text or white space the model didn't work. "when I click on image :the model work normally"
https://codepen.io/ahof920/pen/MWYGRYp?editors=1100
What is the problem?
Replace your HTML with this:
Reason why its not working :
Modal are triggered by following tag's in bootstrap data-toggle="modal" data-target="#ml" and you added those inside <img> tag that's the reason modal is opened when clicked on image. So add data-toggle="modal" data-target="#ml" to <a>.
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="shadow2 m-4 img99">
<a href="#ml" data-toggle="modal" data-target="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="...">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
I am using Bootstrap's Modal class to have a modal appear after clicking a button. The code works - the button is clicked and the modal appears, however, the whole screen is grayed-out and the modal cannot be clicked. I cannot close the modal since it is "in" the gray background. You can see in the image below:
Here is the code:
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" 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>
<section id="profileMain">
<form class="formoid-solid-dark"
style="background-color: #FFFFFF; font-size: 14px; font-family: 'Trebuchet MS','Roboto', Arial, Helvetica, sans-serif; color: #34495E; max-width: 800px; min-width: 150px"
method="post" action="">
<div class="title">
<h2>Intake Request</h2>
</div>
<div id="mainFormTabs" class="container">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#tabCM">Comments</a></li>
</ul>
<div class="container" style="border:1px solid #34495E; border-radius: 0px 4px 4px 4px;">
<div class="tab-content clearfix" style="padding: 10px;">
<div id="tabCM" class="tab-pane fade">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</div>
</div>
</div>
</form>
</section>
I have tried adjusting the z-index for the modal, I have moved the modal div outside the body, at the top, and at the bottom of the html form, but none of these worked.
I appreciate any ideas on how to fix this.
You probably fixed it, but there may somebody who can't. The solution to this problem is;
$("#myModal").prependTo("body");
I went back and moved the modal div outside the body tag and it is now working.
</body>
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" 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>
</html>
I guess than you ready solve, but, just for documentation purpose, you can add this to the css and will help
.modal-backdrop {
display: none;
z-index: 1040 !important;
}
.modal-content {
margin: 2px auto;
z-index: 1100 !important;
}
If you cant place modal section outside body, you can try use this:
<script>
$(document).ready(function () {
$("#modalBtnClick").on("click", function () {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
});
</script>
and don't forget add id attribute to your button:
<button id="modalBtnClick" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
I had this problem and fixed by giving modal z-index css property :
style="z-index: 999999999;"
as previous solutions didn't work for me