I am new to Joomla, I need to build a simple page that contains logos, when clicking any of the logos I need to see pop up message with description of the logo I clicked, close button should also be included.
You can use Bootstrap for this.
In your template you should include jQuery and Bootstrap 4. You can do it by adding in your /templates/your_theme/index.php the following:
<?php
$doc->addScript('https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js', 'text/javascript');
$doc->addScript('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js', 'text/javascript');
$doc->addStyleSheet('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css');
$doc->addScript('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', 'text/javascript');
?>
Then you can use simple Boorstrap 4 modal, like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<div class="your-any-logo-class" role="button" data-toggle="modal" data-target="#exampleModal">
Put your logo here
</div>
<!-- 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">
Modal description
</div>
</div>
</div>
</div>
More about Bootstrap 4 modal here https://getbootstrap.com/docs/4.0/components/modal/#live-demo
Related
I am calling a modal Pop Up with a HREF and when I click it is supose to call a Modal but it is only making my background grey and it doesn't show nothing.
I have the following code:
<div class="modal fade" id="test" tabindex="-1" role="dialog">
<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>
</div>
<div class="modal-body">
HELLO MY PEOPLE
</div>
</div>
</div>
</div>
The HREF click:
Am I doing something wrong? It's my bootstrap CSS messed up? When I change the modals to Containers it shows, but it Shows in a bad way and I really need the modals, am I doing something wrong?
The code which used itself should work fine without any issues. Add the data-target attribute to your anchor tag and see if it works.
Change your anchor tag code as I mentioned below. This should work fine.
I tested in my local machine and it works fine, but some CSS properties can create a problem like that.
please check some steps
your z-index is greater than your body or parent tag
you have data-target property in your anchor tag
must include jquery & bootstrap.js script in your file
WORKING EXAMPLE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="modal fade" id="test" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Stackoverflow</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
HELLO MY PEOPLE
</div>
</div>
</div>
</div>
Open Modal
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
You can open modal by using data-target:
SCREENSHOT HEREI need a modal on my website and i decided to litterally copy the code for a modal on the bootstrap website. Only now it displays very small.
This is the modal code:
<!-- Modal (EXACT COPY FROM BOOTSTRAP) -->
<div class="modal fade" id="exampleModalCenter" 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">
<h5 class="modal-title" id="exampleModalLongTitle">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>
if you want a Bootstrap v4 modal for your site they're quite self explanatory. But for example sake and to hopefully help you. The code below will work for a Bootstrap modal pop-up (large):
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Large Modal</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<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-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
I have a button on my page and I want it to display a pop up box when its clicked however I have tried few things and it doesnt work
I want to make that button to display message when its clicked.
<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i> Find out more</button>
<div id="moreinfo" class="modal fade" role="dialog">
<div class="modal dialog">
<div class="modal-content">
<div class="modal-header">
fds
</div><!--end of modal header-->
<div class="modal-content">
fds
</div><!--end of modal content-->
<div class="modal-footer">
fds
</div><!--end of modal footer-->
</div><!--end of modal content-->
</div><!--end of modal dialog-->
</div><!--en dof more info div-->
With this code all I get is the screen fades out when the button is clicked but it doesnt display anything.
I have got the following too
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You have 2 typos in your code:
<div class="modal dialog">
There should not be any space between modal dialog. Its one class modal-dialog.
You are missing modal-body inside modal. Instead you have used modal-content twice. It should have the structure as per Bootstrap's Documentation.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i> Find out more</button>
<div id="moreinfo" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
fds
</div><!--end of modal header-->
<div class="modal-body">
fds
</div><!--end of modal body-->
<div class="modal-footer">
fds
</div><!--end of modal footer-->
</div><!--end of modal content-->
</div><!--end of modal dialog-->
</div><!--en dof more info div-->
You didnt put hyphen in modal and dilaog , you wrote
<div class="modal dialog">
but You have to write like this
<div class="modal-dialog">
just because of hyphen(-) all problem occured
Do you need the Bootstrap popover?
If yes - here are good and simple example and documentation that exactly represents your needle.
Or you need the button that will call your modal window? If yes - here are good example and documentation that also exactly represents your needle.
Your Code is correct the only problem was in this line .
You have to write like that
All modal code is here of your now just copy paste it and save your time :) cheers
<div id="moreinfo" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div><!--end of modal header-->
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div><!--end of modal footer-->
</div><!--end of modal content-->
</div><!--end of modal dialog-->
</div><!--en dof more info div-->
I am making signup/login popup in menu and loading content through file. MY problem is when I try to access popup content from other file popup is not appear.(in other words access content through remotely)
Here is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<li><i class="fa fa-users"></i>Sign Up</li>
On other file code where popup content is add
<div class="modal fade" id="signup-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header signup_modal_header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">Registration Form</h2>
</div>
<div class="modal-body signup-modal">content</div>
</div>
</div>
</div>
I am trying to create a simple interface with Bootstrap. I have a small page with a few things. It works just fine, but then I wanted to add a modal element to it. I took the example directly from the second bootstrap example. But when I try to use it only the shadow appears, which because the buttons don't appear I can't exit out of it.
Why can't I get the modal to work?
Initial code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row border-top-bottom">
<div class="col-sm-1">
<h5>WEEK 1</h5>
</div>
<div class="col-sm-2 border-right">
Launch demo modal
<img src="http://placehold.it/50x50">
<p><img src="http://placehold.it/50x50"></p>
</div>
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">This weeks project tittle</h3>
</div>
<div class="panel-body">
<p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').popover();
</script>
</body>
</html>
Added modal code:
Launch demo 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">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
In your modal code, yyou have class="modal hide fade" I am not sure what the hide portion is for. I think it's from a older version and your using the newer version ?
That prevented the actual modal window from showing. However, here is the proper modal window code, that should work fine.
Replace:
<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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You need to load Bootstrap's javascript file to launch the modal. Try adding the bootstrap.min.js file into your head tag like this:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
You are mixing bootstrap 2.3 and 3.0. They are not compatible.
The html for the modal dialog is from bootstrap 2.3.2
Try changing to this and it should work:
<div id="myModal" class="modal fade" 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>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>