Create button that functions like link and opens a new popup through a Javascript function

Question

I have a JS function that creates a new popup window.

function newTab(center, section, tab) {
    currentItem.numWindows += 1;
    var title = "Window #" + currentItem.numWindows;
    var tabsObject = [center, section, tab];
    currentItem.windows[currentItem.numWindows] = window.open('popup.php', title, toolbar = 0, menubar = 0, navigationbar = 0);
    currentItem.windows[currentItem.numWindows].variable = tabsObject;
}

I want to create a button that looks like a button but acts like a link. To clarify, when the user right clicks on the button I need it to open up the standard browser options like "open in new window" or "open in new tab".

Instead of this leading to a standard "otherpage.html" I need it to call my JS function (which in turn creates the popup).

I have searched and I keep finding examples that look like a link but don't act like a link.

I have tried IameLemon's suggestion,

<a onclick="someFunction();"><button type="button">Text of Some Page</button></a>

this code works however it does not allow the user to right click and access the standard options that come with a link (the ability to open in a new tab or window)

Thanks!

Did you consider adding a link itself, and adding appropriate CSS to make it appear like a button? — venkatKA, May 19 '16 at 18:15
Am I missing something? What's the question? Where are you stuck? Does this code not work in some way? — David, May 19 '16 at 18:19
I have used in multiple ways. The issue is that I need the new page to be launched by the javascript function and the ability for the user to right click and open as a tab or window. — linuxisthebest33, May 19 '16 at 18:21
what did you try..? could you please show us what you have tried so far..and also please explain clearly the problem that you are facing.. — Lal, May 19 '16 at 18:23
use the `onclick` attribute for `` to call the javascript function.. — Lal, May 19 '16 at 18:23
Possible duplicate of [How do I make an html link look like a button?](http://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button) — pppp, May 19 '16 at 18:25
_"and the ability for the user to right click and open as a tab or window"_ ... and only using a link will get you that, for buttons browsers don't offer those options. So use a link, and _format_ it to look like you want it to. — CBroe, May 19 '16 at 18:29

score 0 · Answer 1 · answered May 19 '16 at 18:16

0

Apply css styling to an anchor.

<a href='function();' style='whateverfloatsYourBoat'>value</a>

answered May 19 '16 at 18:16

whatever5599451

55
4

pppp · Answer 2 · 2016-05-19T18:23:13.963

0

make a button within a link:

<a href='newtab();'><button type=button>button text</button></a>

edited May 19 '16 at 18:23

answered May 19 '16 at 18:18

pppp

231
1
11

Might want to add ` – neilsimp1 May 19 '16 at 18:19
Same as with the other answer - that would be invalid HTML. – CBroe May 19 '16 at 18:30
@CBroe what does that mean? – pppp May 19 '16 at 18:34
html validation rules disallow a button inside of an anchor – whatever5599451 May 19 '16 at 18:44

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

Stealing from another answer.

Why not just wrap a button in a link? Here's a fiddle as well.

<a onclick="someFunction();"><button type="button">Text of Some Page</button></a>

edited May 23 '17 at 12:16

Community

1
1

answered May 19 '16 at 18:23

Steven B.

8,962
3
24
45

2

_"Why not just wrap a button in a link?"_ - because that would be invalid HTML. – CBroe May 19 '16 at 18:30

Paul · Answer 4 · 2016-05-19T18:25:36.043

Use CSS. Below will make a link look like a button. i.e., if you right click it, it will give you option to open in new tab, etc.

.SSSBUTTON_CONFIRMLINK {
    font-family: Arial,sans-serif;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-variant: small-caps;
    color: rgb(64, 111, 53);
    background-color: rgb(222,235,181);
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: capitalize;
    text-align: center;
    line-height: 20px;
    margin-left: 1px;
    border-width: 1px;
    border-top-color: rgb(142, 203, 98);
    border-bottom-color: rgb(114, 175, 69);
    border-left-color: rgb(142, 203, 98);
    border-right-color: rgb(114, 175, 69);
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: solid;
    height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

<a class="SSSBUTTON_CONFIRMLINK" href="#top">Click Me</a>

It will make a link look like a button. – Paul May 19 '16 at 18:26 — Paul, May 19 '16 at 18:26

Create button that functions like link and opens a new popup through a Javascript function

4 Answers4