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>
Related
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
I have a bootstrap model like below, I want to insert this modal to every html page by calling a javascript function addModal(); and it should append the modal to the body tag
how to do it
<!-- 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 type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ok. Now this way you just have to link your js file and then call the function. (you'll still need jquery for the .append() method)
function addModal() {
$("body").append('<!-- 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 type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>');
}
An easy way of doing this is using jquery:
<script>
$(document).ready(function() {
$("#ModalDiv").load("yourModal.html");
});
</script>
HTML:
<body>
//your code
<div id="ModalDiv"></div>
//your code
</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'm trying to use a button inside a bootstrap modal to link to another page on my site. I haven't been able to do this for some reason. Here is what the code inside the modal looks like:
<div class="modal-footer">
Read More
<button type="button" data-dismiss="modal" class="btn btn-warning">Close</button>
</div><!-- End modal-footer -->
Clicking on the Read More button will close the modal, but not open the link to another-page.php. Is there another tag that I'm missing?
use this command instead of data-dismiss="modal" in link
onclick="$('#modalId').modal('hide')"
Remove the data-dismiss="modal" attribute from your button...
<div class="modal-footer">
Read More
<button type="button" data-dismiss="modal" class="btn btn-warning">Close</button>
</div><!-- End modal-footer -->
Example...
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Open modal
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
Read More
<button class="btn" data-dismiss="modal">Close</button>
</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>