<div id="close">
<button onclick="closeWin()">Close to return to previous page"</button>
</div>
<script>
var myWindow;
function closeWin() {
myWindow.close();
}
</script>
How do I style the button to give it new background color, width, height, font, etc?
Just like any other element. Although when not within a form it might be more semantic to use other elements for CTAs⌠in this case, âreturn to previous pageâ would be a good candidate for an <a> tag with a fallback href, for instance.
I donât want to send the visitor anywhere. I want him to close the page. Of course, it can be closed by the X in the top corner, but I found this little script but it needs changing its looks.
I put the code above inside a div and I can centre it but could not style the size of the button
It looks as if this code will not work as it need to be opened with similar javascript.
What I am trying to do is to open a new page with target=â_blankâ which will not have any navigation, and obviously will not have a back button active. The only way to carry on is to close the page and be back on the original one.
The visitor has only one option: leave by clicking on the red X in the top corner (or pressing ALT F4).
I would like to place a large button, (with an explanation below: âPress to return to the previous pageâ) that did exactly the same.
What are you trying to do exactly? a modal window could be the answer where it opens the page content in a âwindowâ over the current page. I use nyroModal and itâs pretty simple to do.
Imagine 2 webpages, each for one country. each has subsidiary pages for all sorts of things, including for instance a page on electrical current in that country.
Now imagine that another country comes along but this one has two cities. esch with its own page, say, London and Oxford. The electrical current is the same so there are going to be two indentical pages with different urls. Google does not like that.
I have worked out two ways of getting round the problem but am still looking for something more elegant.
The idea is that each city will link to the same page, but needs to return to the page where it was before. One solution was to give a choice of the towns: âReturn to Londonâ and âReturn to Oxfordâ without using target blank⌠The other using target blank, simply asks the visitor to close the page via the x in the tab.
so would something like i have on this page do what you need http://www.goodbeachguide.co.uk/beach/wembury#waterquality
if you click on the âdesignated bathing watersâ link in the first para it should open a âlightboxâ with info about water quality. This is the same information across many of my beach pages. I could pull in other information if i wanted simply using a dynamic page and a url query string or just link to individual static pages.
So for example youâd set up a page about electrical current for the uk and youâd just make a link to the lightbox to open it from the london page and the oxford page. If you did it dynamically like above you could stick all this info in a database and have an output page to link to and have the url determine which one to return e.g infopage.php?country=england&type=electric
Yes, the idea of a popup, My site started with that sort of thing but I had to give it up because Edge could not cope with it.
No, if I am unable to presetn the page with its sidebar and all.
I had thought of simply opening the page in a slightly reduced format so that the visitor could always see the main page below. the, it would be intuitive to close the smaller one to carry on with the main one.
Link to the same subsidiary page about electricity from each city. (You could also set a canonical URL or mark one of them ânoindexâ, but simply having both link to the same page seems easier.)
If youâve opened it in a new window/tab then as soon as they close it they will be left with the page they started with. You can still have a close this tab/window button if you want.
The lightbox doesnât have to be as complicated as i made it. It will literally open any webpage you like.
I would still say that the right thing to do, and the easy thing to do, in this case coincide. Donât open it in a new tab/window. Open the link the way links were designed to be opened, in the same tab/window. (The user can always choose to open in a new tab, but you shouldnât take that control away from them. It causes accessibility/usability issues.)
I tried this but obviously I did not understand it. When I click I end up back on the page I want to close
<style>
#close{
margin:0 auto;
margin-top:100px;
border:solid gray 5px;
background-color:#F1E3D5;
color:black;
max-width:60%;
padding:30px 0 20px 0;
}
#close p{
text-align:center !important;
line-height:160%;
}
#close b{
color:crimson;
font-size:20px;
}
.advert{
padding-top:20px;
}
#close span{
text-align:center;
margin:0 auto;
}
</style>
<div id="close">
<a href="#" onclick="closeWin()"><p> To return to the previous page <br><b>close this tab only</b><br>Press the little x at the top in the tab<br> not in the top right corner.</p>
</a>
</div>