I am trying to create a slide out menu from a span in my nav and am having difficulty. Hope someone can help as I have searched Google and not finding what I am after. Basically, I have this code:
<div style="background-color: #002F33; min-height:50px;">
<span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span>
<div>
Link1
Link2
Link3
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
I simply want to get the menu when the span image is clicked to flyout over the content below. Not sure why I am having trouble with this, but appreciate any help you can give.
I added ids to some of your divs and use javascript to toggle a css class created below
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
Snippet below
//make a refernce to the container that holds all your links
var menu_item_container = document.getElementById("menu_items")
//This function will show/hide menu options if image is clicked on
function clicker() {
menu_item_container.classList.toggle('menu_items_toggle');
console.log(menu_item_container.classList.contains('menu_items_toggle'))
}
console.log(document.getElementById("span_img_container"));
document.getElementById("menu_img").addEventListener('click', clicker)
#menu {
position: relative;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
}
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
img {
width: 100px;
height: 100px;
}
<div id="menu" style="background-color: #002F33; min-height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span>
<div id="menu_items" class="">
Link1
<br>
Link2
<br>
Link3
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
Related
Here I have a Div(div1 in figure) that I want it to center in the page(now I used margin-left to forced it at a center place of my own pc, but when other person with different resolution screen open it, it is not at the center.) I have tried make each relative/fixed/absolute/padding/margin, and search online for two days, but either each part in div1 falls apart or it doesn't work.
And At the same time, I added a text div(div2) and want it to below this current div(div1), and it doesn't goes below it, it goes hide under div 1. I searched online and know that it will do this if there is a relative/fixed position div before it, it will be ignored. So i can only use fixed position for div 2 as well. which I don't want it to.And I also want it go to the center of the page.
The main problem here is my page is not fix every screen and at the center.
view example page at http://circleofallnations.ca/
the big circle is the div1, 5 parts in it and form that circle, thats why div1 has to be a relative div
the text under the big circle is div 2.(you can see it is a picture on texting page, and I changed it to a text div in below code.)
Here is the example figure
html code:
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text1"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2">Circle of All Nations</div>
<div id= "bottom2" class = "text2">William Commanda</div>
<div id= "bottom3" class = "text2">William Commanda Legacy - Asinabka</div>
<div id= "bottom4" class = "text2">Romola Vasantha Thumbadoo</div>
<div id= "bottom5" class = "text2">Romola's Nature CAN Photo-Art</div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola#circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
ASINABKA |>
DIGITAL ATLAS |
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
and here is css sheet
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
js code(not too important)
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
Please help, thank you in advance.
Hello There! I think you should try margin: auto property. First of all, remove the position:relative and margin left properties from your container. And then add a width or height to your container(according to your need), and add margin:auto to it. Here's an example code:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
This will definitely center align it.
And if you want to make your div go to next line, just add display: block; property to it. And if it gets hide under div1, add z-index: +1 property to it. Try all these edits, and let me know if it fixed your problem.
I am a web developer. Now I am developing, my new project but I am having problems. I have created an ebook viewer list. Here are some problems. Some buttons are included such as [Download, Bulk Download, Save to Library and “More”]. Everything is fine but the [more] buttons are not working properly.
I want the list of all my books to be created by clicking on the [more] icon so that the list of [more] buttons can be seen in the right place.
The first list is working properly but I have made a list of other ebook viewers. It is not working properly. Clicking on the [More] button opens the first book list button.
I need help from an expert developer. Here is my project screenshot and source code
view screenshot
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
Hello #Sajjad Hosen This is probably far to late. But because there are other people that want answers to such questions I will put in my two-penny worth. Beginner to beginner.
You have two flaws. The first is that you are using the same id ("myDropdown") for all your four menu buttons. Then the browser engine finds the first and that's it. That is why it always opens the first submenu.
The second: it is your function myFunction that has a flaw:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
This will always find the same element with id (supposedly only one in the DOM). You need to use this keyword to refer to the element that was clicked. So your buttons would now look like:
<button onclick="myFunction(this)" class="dropbtn">Dropdown</button>
You pass as a paramenter the very element you clicked on.
Now, you have to traverse to your "myDropdown" elements because this refers to a button and not a menu.
function myFunction(el) {
el.nextSibling.nextSibling.classList.toggle("show");
console.log(el);
}
As you see, your function now uses el as parameter. We need to use two .nextSibling properties. In your case you divided the </button> closing tag and next <div> tag with whitespace (new line). This is treated as text which is considered as a new element in DOM. Only the next .nextSibling property finally gets your menu element.
Some people advertise such usage of tags: </button><div>. Tags are then together.
I am inclined to make as much of this front end code with CSS. So perhaps I could propose my solution. Although there are differences. Here I show only one menu button. And after a click in your solution the submenu remains open. In my solution it is there only as long as a cursor hovers above the Dropdown button and its menu. A warning though for those that will expand a solution for more buttons: you should also change the id's of elements.
If someone finds flaws in my solution I'd be happy to hear from them.
.wrapper {
position: absolute;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
}
#menubutton {
z-index: 1;
opacity: 0.99;
position: absolute;
top: 5vh;
width: 100%;
background-color: green;
color: white;
text-align: center;
padding: 1em 0em;
cursor: pointer;
height: 1.25em;
border-radius: 0.3125em;
}
#menu {
z-index: 0;
opacity: 0.99;
position: absolute;
left: 0em;
top: 5vh;
text-align: center;
width: 100%;
height: 1.25em;
background-color: transparent;
color: #fff;
padding: 0;
transition: height 1s;
border-radius: 0.3125em;
overflow: hidden;
}
.rows {
position: absolute;
width: 100%;
height: 1.25em;
display: block;
margin-left: auto;
margin-right: auto;
padding: 1em 0em;
border-radius: 0.6125em;
background-color: green;
cursor: pointer;
}
#menuItem1 {
bottom: 7.2em;
}
#menuItem2 {
bottom: 3.6em;
}
#menuItem3 {
bottom: 0em;
}
#menubutton:hover+#menu,
#menu:hover {
height: 14.0em;
}
<div class="wrapper">
<div align="center " id="menubutton">Dropdown
</div>
<div id="menu">
<div class="rows" id="menuItem1">Home</div>
<div class="rows" id="menuItem2">About</div>
<div class="rows" id="menuItem3">Contact</div>
</div>
</div>
The site I'm working is suposed to change the logo location and size, from top to the far left, and incidentally shrink the navbar to fit the new size, when the user is scrolling down. I've managed to get it to work with javascript but now a different problem ocurred: when the logo is repositioned to the left it pushes the menu items below.
To better illustrate it here's a fiddle: https://jsfiddle.net/resch/d6vfertf/3/
What I want is when the user scrolls down, the logo goes to the far left of the menu but the menu items stay in the middle (vertically speaking) of the navbar.
NOTE: This blog illustrates perfectly what I am trying to do: http://www.depoisdosquinze.com/
Couldn't find my answer here, please feel free to mark as duplicate and vote to close if this is already answered.
Thank you!
var $header = $("nav.navbar");
var $logo = $("a.logo");
var $li = $("ul.navbar-nav > li");
var $img = $("img#logo");
$(window).scroll(function() {
var e = $(this).scrollTop();
if (e > 90) {
$header.css("height", "60px");
$img.css("max-width", "180px");
$logo.removeClass('logo');
$logo.addClass('logo.scroll');
$li.addClass('scroll');
} else {
$header.css("height", "120px");
$img.css("max-width", "300px");
$logo.removeClass('logo.scroll');
$logo.addClass('logo');
$li.removeClass('scroll');
}
});
img#logo {
max-width: 300px;
border: none;
}
.navbar {
position: relative;
margin-bottom: 0;
background-color: white;
border: 0;
font-size: 12px !important;
letter-spacing: 4px;
height: 120px;
opacity: 0.9;
}
.navbar-nav {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.navbar-nav>li.scroll {
display: inline-block;
float: none;
padding-top: 0px;
}
.navbar-nav>li {
display: inline-block;
float: none;
padding-top: 70px;
}
.navbar-fixed-top {
position: fixed !important;
}
.logo.scroll {
position: absolute;
display: block;
}
.logo {
position: absolute;
left: 50%;
margin-left: -160px !important;
display: block;
}
.navbar-toggle {
z-index: 3;
}
.navbar li a,
.navbar .navbar-brand {
color: #beb5ac !important;
}
.navbar-nav li a:hover {
color: #ded8d2 !important;
transition: color 1s ease;
}
.navbar-nav li.active a {
color: #fff !important;
background-color: #29292c !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
#media screen and (max-width: 780px) {
.logo {
margin-top: -50px;
padding-top: 10px !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a id="brand" class="logo" href="teste3.html">
<img id="logo" src="https://s4.postimg.org/3tdea6k19/logo2.png" alt=""></a>
<div class="navbar-header navbar-header-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="index">INÍCIO</li>
<li class="sobre">SOBRE</li>
<li class="ilustracao">ILUSTRAÇÃO</li>
<li class="design">DESIGN GRÁFICO</li>
</ul>
</div>
</div>
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
The problem is that when you scroll down your <div class="collapse navbar-collapse" id="myNavbar">, it stays full width. The quickest way to solve the problem you need to display in inline i.e. add display: inline-block to it. If the style is not persistent add !important to it.
However, it is a good idea to avoid using !important in your code. I will suggest reading about flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) as it will make it easier to implement changes without using !importtant in your code.
Froggy http://flexboxfroggy.com is also helpful to learn flexbox. I hope this helps.
I am trying to make a container div get a blue underline when it is clicked.
I found a fiddle that I hoped would help me with this:
http://jsfiddle.net/gvpr9w06/
Although I can not make it work, my fiddle:
https://jsfiddle.net/gzp97yjo/
My code:
Html:
<div class="AdministrationSettingsArea">
<a href="#">
<div class="linkContainer tablik">
<div class="">Domains</div>
</div>
</a>
<a href="#">
<div class="linkContainer tablik">
<div class="">Something new</div>
</div>
</a>
<a href="#">
<div class="linkContainer tablik">
<div class="">Darkside</div>
</div>
</a>
</div>
Css:
.tablik {
display: inline-block;
cursor:pointer;
}
.AdministrationSettingsArea a .linkContainer{
display: inline-block;
float: left;
width:33%;
padding:5px 10px;
text-align:left
}
.AdministrationSettingsArea a .linkContainer:hover{
color:black;
background-color:#F1F1F1;
}
.tablik:after{
display: block;
height: 5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.tablik.AdmClicked:after{
width: 100%;
background: blue;
}
Script:
$(function(){
$(".AdministrationSettingsArea a").on("click", function() {
console.log($(this).find(".tablik"));
if ($(this).find(".tablik").hasClass("AdmClicked")) return;
$(this).parent().find(".tablik").removeClass("AdmClicked");
$(this).find(".tablik").addClass("AdmClicked");
})
})
What am i missing?
You're missing from the original:
.tablik:after {
content: '';
so the :after has no content, so is not displayed.
So I am using this code:
http://jsfiddle.net/xSmNs/
$(document).ready(function() {
$('#lightbox_button').click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
});
To make popups on click of a link. I want multiple links that output different divs. I was going to just make multiple instances of this code (changing the id so that the buttons open their corresponding divs) but I am wondering if there is a more efficient method using this code?
You can use $.fn.lightbox as a function itself and apply it on a DOM object.
http://jsfiddle.net/7rfpwctm/2/
$(document).ready(function() {
$.fn.lightbox = function(){
$(this).click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
};
$('#lightbox_button').lightbox();
$('#another_lightbox_button').lightbox();
});
#lightbox_panel
{
position: relative;
z-index: 99;
width: 500px;
height: 100px;
margin: 30px auto 0;
background-color: #CCC;
display: none;
padding: 10px;
}
#lightbox
{
z-index: 90;
position: absolute;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80);
width: 100%;
height: 100%;
display: none;
top: 0;
}
#close_lightbox
{
}
#lightbox_button{
position:absolute;
left:0;
top:100%;
width:200px;
}
#another_lightbox_button{
position:absolute;
right:0;
top:100%;
width:400px;
}
.button
{
position: absolute;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #000;
display: inline-block;
bottom: 10px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<a href="#" id="lightbox_button">
<div class="button">button</div>
</a>
<a href="#" id="another_lightbox_button">
<div class="button">another button</div>
</a>
<div id="lightbox_panel">
<h1>lightbox panel</h1>
<a href="#" id="close_lightbox">
<div class="button">close</div>
</a>
</div>
</div>
<div id="lightbox"></div>
Something like this helps?
Give the light box button 2 data-attributes, which points to the divs which needs to be popup when clicking on that. Also use a common class for all light box buttons.
<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel">
<div class="button" >button</div>
</a>
Then you can re-use the code like,
$('.lightbox_button').click(function () {
$($(this).data("box")).fadeIn("slow");
$($(this).data("panel")).fadeIn("slow");
});
Fiddle
You could use this function:
function doModal(boxid,show) {
if (show) {
$('#'+boxid).fadeIn('slow');
$('#'+boxid+'_panel').fadeIn('slow');
} else {
$('#'+boxid).fadeOut('slow');
$('#'+boxid+'_panel').fadeOut('slow');
}
}
And then on your buttons or links:
<span onclick="doModal('Box1',true)">Open Box 1</span>
<span onclick="doModal('Box2',true)">Open Box 2</span>
For closing the boxes:
<span onclick="doModal('Box1',false)">Close Box 1</span>
<span onclick="doModal('Box2',false)">Close Box 2</span>