How can I open an section of html with an id using JS/JQuery?
Lets say the html I want to trigger with JS/JQuery is
<section class="modal--show" id="show"
tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-show">A modal</h2>
</header>
<div class="modal-content">
<p>Content.</p>
<div id="badgeselect">
</div>
<footer>
<p>Footer</p>
</footer>
</div>
</section>
I've tried using
$('#show').dialog('open');
which doesn't work. The only other consideration is, that the full code must also copy an image that the user clicks on (to activate show)
I have this at the moment, the only part not working is making the above code show on the page after the user has clicked the image.
$(document).ready(function() {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#show').dialog('open');
});
SaveMyBadge();
return false;
});
.dialog is not a native method available in JavaScript. If you want a modal out of the box then i recommend using a JavaScript Library which comes with such features built in. Twitter's bootstrap will be a good option.
To get started:
In your <head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Include this script after you include jQuery
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
HTML:
<!-- Modal Markup -->
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<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>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
To launch the modal
$('#modal').modal({'show':true});
Bootstrap homepage
UPDATE:
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#modal').modal({'show':true});
});
You are missing a closing div tag.
<div id="badgeselect">
is never closed. That could be causing some strange issues
Well you could just add a click listener to the img and change the css class of the section.
The css class could have display:block
and as you stated its a pop up you could set its position in your class along with other properties such as opacity or simply
document.getElementById("show").style.display = block;
OR
document.getElementById("show").className = "MyClass";
.MyClass{
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-width/2;
margin-top:-height/2;
opacity:0.8;
}
This should create a pop up like feature.
Related
I use bootstrap 3.3.7 in my angular project and the modal is disabled when I open it by clicking "ADD CLASS".
My code is below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="add-class pointer" data-toggle="modal" data-target="#add-class-modal">
<img alt="+" src="assets/images/add.png" height="16px" width="16px" style="margin-top: -2px"><span class="add-a-class">ADD CLASS</span>
</div>
<!-- Modal -->
<div class="modal fade" id="add-class-modal" 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-label="Close"><span aria-hidden="true">×</span></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>
</div>
</div>
The result looks like this.
"ADD CLASS" button is at the top right corner.
How can I fix it?
Probaby you have some styling which makes that background overlay has larger z-index. Make sure your modal class has correct styling and dont have some additional onces. it should work fine with default bootstrap styling. You can try setting larger z-index to .modal, but the key is to check if you dont have some additional styling applied.
// this is class for dialog itself
.modal {
position: relative;
z-index: 9999
}
If z-index is smaller than 1072 it can be covered by gray background
UPDATE:
Based on bootstrap example modal on bootstrap page, looks like that gray background is created by div with class mocal-backdrop, which by default have such z-index:
.modal-backdrop {
z-index: 1071;
}
The bootstrap popup is not showing up on my website. I have copied the popup code from the official Bootstrap website.
Here is the link to my website Link to webiste
The popup button is located before the footer credits.
Current condition :
Query Bootstrap Modal is not working
Below code is copy pasted from your give url http://home.india-market.online/
It is working properly in separate example
Solution:
You have footer, <footer class="footer-social-icon text-center section_padding_70 clearfix">
Some how there is z-index:-101; and position:fixed; in <footer>
You need to remove model outside from <footer> and apply directly before </body> tag ends.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" 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>
I hope it will start working normally.
Old Code from website is :
The reason is that modal content is placed (nested) inside footer element. Move that modal div to body and modal will appear.
I have several Modals on the same page, but they are only showing intermittently. The Models are trigged by this script.
$(".embed").on("contextmenu", function(e) {
e.preventDefault();
var targetModal = $(this).data('target');
$(targetModal).modal("show");
})
HTML is
<div class="embed" data-target="#embed0">
<img src="images/stakeholder-interest.png" alt="Analyse stakeholder interest"/>
</div>
Modal html is
<div id="embed0" class="modal" 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>
</div><!--END model-header-->
<div class="modal-body">
</div><!--END model-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div><!-- end modal-content-->
</div><!-- end modal-dialog-->
</div><!-- END embed0 1st image-->
SumoMe Highlighter is the culprit. Turning the Highlighter off allowed the modals to be shown on every image, correctly and consistently. Suspect SumoMe CSS which is applied on page load is intefering with other page elements.
I have a model box designed in jquery on one of my pages, I wonder if it is possible to make this modal show a full dynamic php page?
You can use the load() function, which is very easy to use, and well documented : http://api.jquery.com/load/ . it loads a page in the selected element, your modal's body for example, just calling a url.
Use iframe for modal box
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Trigger Modal in iFrame</button>
<!-- 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">
<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">
<iframe src="/user/dashboard" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</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 -->
Iframe src will have your dynamic page.
Include bootstrap.css and bootstrap.js
eg:,
<a data-toggle="modal" href="your_url content to show" data-target="#myModal">Click</a>
<div id="#myModal"></div>
Reference-http://getbootstrap.com/javascript/#modals
Use jQuery load() like this,
jQuery part
<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- A button on the page -->
<body>
<button>Fetch Page</button>
</body>
<!--
1. Attach click event to 'button' with jQuery on()
2. Create a modal box dynamically with append()
3. Load 'the_dynamic_page.php' with jQuery load()
-->
<script>
$('body').on('click','button',function(){
$('body').append("<div id='modal_box' style='border:1px solid #999;position:fixed;top:50%;left:45%;padding:0 0.75%;font-family:Calibri,Candara,Arial;'></div>");
$('#modal_box').load('the_dynamic_page.php');
});
</script>
the_dynamic_page.php
This page could simply display a text like 'Im in a Modal Box!' or something from db.
I've read the many threads on this topic but none have answered the issue that I'm having. I am trying to create a modal view overlay that spans the page width. However, the modal renders but it isn't responsive. It is darkened out and buttons won't work. This is how I load my assets:
<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>
And this the code I'm running on modal:
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">
<h3>Modal Body</h3>
</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>
</div>
</div>
<div class="container-fluid">
<%= yield %>
</div>
</body>
</html>
And this is where I want it called from. And I think because I have an animation effect it might be screwing with the event. Note that this is the first thing within the yield:
<div class="container-fluid">
<div class="row"><div class="col-md-12"><h1>Title</h1></div>
<div class="row">
<div class="col-md-3">
<div class="menu-item-1 card effect_hover">
<a class="modal-link" data-toggle="modal" data-target="#basicModal">
<div class="card_front">
<span class="icon-home3 card_text"></span><br>ABOUT
</div>
<div class="card_back">
<span class="card_text">Learn all about our community!</span>
</div>
</a>
</div>
...
So, that's it. I've read the Documentation by Bootstrap and have copied the code into the page but the same issue remains. I've also tried using a local version of bootstrap assets. Thoughts?
I am trying to create a modal view overlay that spans the page width.
Well in that case, you'll have to edit the below line of CSS in the bootstrap.css (not recommended) or in your custom css file.
Here's the line:
#media (min-width: 768px) {
.modal-dialog {
width: 100%; // by default its 600px.
margin: 30px auto;
}
The Bootstrap carousel is built to be responsive, see the screen shots:
On big screens:
.
On smaller screens:
You must be having some content inside the modal which is not responsive or rather with a fixed width.
if you have a look at the styles for the modal, in bootstrap.css, you'll see that:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
The width is set to auto except when the screen-width is 768 or greater, in which case the width is set to.
width:600px;