I am facing a weird issue here. It might be a very silly mistake that I am doing.
function addTrainer() {
var modal = document.getElementById('add-trainers-form');
var span = document.getElementsByClassName("close")[0];
$(this).click(function(event) { //this part of code works fine,
$('.modal').css('display', 'block');
});
$(span).click(function(event) { //not working
// modal.style.display = "none";
$('.modal').css('display', 'inherit');
});
$(window).click(function(event) { //this also works fine
if (event.target == modal) {
modal.style.display = "none";
}
});
$('#add-trainer-btn').click(function() { //not working
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="add-trainers-controls">
<div class="add-remove-control">
<input id="add-trainer" type="image" src="img/add5.png" alt="Submit" width="48" height="48" onclick="addTrainer()">
</div>
</div>
<!-- The Modal -->
<div id="add-trainers-form" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Add Trainers</p>
<input class="textStyle" type="text" placeholder="Username">
<input class="textStyle" type="text" placeholder="Email">
<button id="add-trainer-btn" class="buttonStyle" type="button">Add</button>
</div>
</div>
</div>
When I click on #add-trainer button, modal pops up. Its default css property is set to display:none. After clicking it is set to display:block. When I click anywhere outside the modal window, display property is reset to none. But the same needs to be done with #add-trainer-btn and #close button which is not working.
Related
i want to replace a div that is already displayed with another Hidden div with just one click. i don't want it to toggle. below is the code.
<html>
<script type="text/javascript">
function show(elementId) {
document.getElementById("surf").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
</html>
My desired output should be Display On Click when i click the button.
But right now i'm having both Display By Default and Display On Click showing when i click the button display by default at the top and Display On Click at button. i just want Display By Default to be replaced with Display On Click on same line.
<!DOCTYPE html>
<html>
<body>
<div id="div1" style="display:block">
<h2>first div</h2>
</div>
<div id="div2" style="display:none">
<h2>second div</h2>
</div>
<button onclick=show()>click here</button>
</body>
<script>
function show() {
let div1 = document.querySelector('#div1');
let div2 = document.querySelector('#div2');
if (div1.style.display == "block") {
div1.style.display = "none";
div2.style.display = "block";
} else {
div1.style.display = "block";
div2.style.display = "none";
}
}
</script>
</html>
onclick to hide div1 and show div2,
Next click hide div2 and show div1.
You are targeting the wrong element here document.getElementById("surf").style.display="none";. The "surf" should be "mode" instead. This worked for me
function show(elementId) {
document.getElementById("mode").style.display="none";
document.getElementById(elementId).style.display="block";
}
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
How do I loop through all the images using the call trigger, when I click on the image a modal popup should show my text and image.
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
}
<div portfolio-item ">
<a class="trigger "><img src="images/techify.jpg "/></a>
<div class="modal ">
<div class="modal-content ">
<img class="modalimages " src ="Images/techify.jpg ">
<div class="modal-text ">
<p> It is all about a training institute</p>
</div>
</div>
</div>
</div>
<div class="modal-content ">
<img class="modalimages " src ="Images/HairStyling.jpg ">
</div>
</div>
Going by what you've supplied there are a few minor issues that would even prevent this from running, so I had to make some small changes to the code before I could even begin. One being the } placed at the end of your script.
Another being the <div portfolio-item"> only having one ".
This may or may not be what you're trying to accomplish, but we'd need more information in order to know.
<style>
.modal { display: block; }
.show-modal { display: none; }
</style>
<div portfolio-item>
<a class="trigger">
<img src="images/techify.jpg"/>
</a>
<div class="modal">
<div class="modal-content">
<img class="modalimages" src="Images/techify.jpg">
<div class="modal-text">
<p> It is all about a training institute</p>
</div>
</div>
</div>
<div class="modal-content">
<img class="modalimages" src="Images/HairStyling.jpg">
</div>
</div>
<button class="close-button">Close Button</button>
<script>
var modal = document.querySelectorAll(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
for(i=0;i<modal.length;i++){
modal[i].classList.toggle("show-modal");
}
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
If you've looking for both images to be hidden on the first image click or by pressing the button (which I also had to add) you'll need to move the following code up by one line
<div class="modal-content">
<img class="modalimages" src="Images/HairStyling.jpg">
</div>
If you want to add an event to every image, you could use some Javascript like this:
var images = document.querySelectorAll("img")
for( var i = 0 ; i < images.length ; i++ ) {
images[i].addEventListener("click" someFunction)
}
This make it so that when any image is clicked, it calls the someFunction function
I've been trying to fix this for a while now, when my side-bar is inside a tag it stops working.
HTML:
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">
<br />
<div class="aptest-container aptest-row">
<div class="aptest-col s4">
<img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" />
</div>
<div class="aptest-col s8">
<span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />
</nav>
<div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="aptest-main" style="margin-left:300px;margin-top:43px;">
</div>
CSS:
#media screen and (max-width:992px){.aptest-sidenav.aptest-collapse{display:none}.aptest-main{margin-left:0!important;margin-right:0!important}}
#media screen and (min-width:993px){.aptest-sidenav.aptest-collapse{display:block!important}}
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
var mySidenav = $("#mySidenav");
var overlayBg = $("#myOverlay");
$("#aptest_open").click(function () {
if (mySidenav.style.display === 'block') {
mySidenav.style.display = 'none';
overlayBg.style.display = "none";
} else {
alert("2");
mySidenav.style.display = 'block';
overlayBg.style.display = "block";
}
});
function aptest_close() {
alert();
mySidenav.style.display = "none";
overlayBg.style.display = "none";
}
});
</script>
I'm not sure what is wrong, ive tried using jQuery, pure JS I cant get it to work. The JS above doesn't even run. I'm really confused. Thanks for any help!
You do not have any element with id="aptest_open". Your alert code is in a code block that works only by click on element with id aptest_open.
When you select an element by jquery selector, To change it's styles you need to yous css not style. In code snippet I added a button with id aptest_open and edited the problem.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">This is my side nav
<br />
<div class="aptest-container aptest-row">
<div class="aptest-col s4">
<img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" />
</div>
<div class="aptest-col s8">
<span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />
</nav>
<div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="aptest-main" style="margin-left:300px;margin-top:43px;">
</div>
<input type="button" id="aptest_open" value="aptest_open" />
<script type="text/javascript">
$(document).ready(function () {
var mySidenav = $("#mySidenav");
var overlayBg = $("#myOverlay");
$("#aptest_open").click(function () {
if (mySidenav.css('display') === 'block') {
mySidenav.css('display', 'none');
} else {
alert("2");
mySidenav.css('display', 'block');
}
});
function aptest_close() {
alert();
mySidenav.style.display = "none";
overlayBg.style.display = "none";
}
});
</script>
I have a popup bootstrap code in html file and i want to use in another html file.I have created a button in html file and i want to cal model which is in another html file.How can i do this??
A.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"> <button type="button" id="myBtn" class="btn btn-success" style="width:200px;font-size:30px; transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:left, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:left,center;
position: fixed; bottom:30%; right: -73px;
color:white;" class="btn btn-success">Order</button>
</div>
</div>
</div>
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
B.HTML
<html>
<head></head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header">
<span class="close2">×</span>
<h2>Order Services</h2>
</div>
<div class="modal-body2">
</div>
<!-- <div class="modal-footer">
<h3>Modal Footer</h3>
</div> -->
</div>
</div>
</body>
</html>
I want to use B.HTML from A.HTML .How can i accomplish this?
Use this script on A.html file
$(document).load( "B.html", function() {
alert( "Load was performed." );
});
Try this code inside A.html .
<div id="myModalContainer"></div>
$(document).ready(
function() {
$( "#myModalContainer" ).load( "B.html #myModal" );
}
);
you can use jquery or
you cant create your modal as string that contain htmls code in it
for example
var = '<div class="model">...</div>'
and then set this script in js file and then import it in any file you want to use modal
at the end you can append it into your body or remove it
you can see this link
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>
Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE
This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}
Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>
CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}