创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口

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

本文关键字:一个 函数 窗口 Javascript 链接 按钮 创建      更新时间:2023-09-26

我有一个JS函数,可以创建一个新的弹出窗口。

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;
}

我想创建一个看起来像按钮但行为像链接的按钮。为了澄清,当用户右键单击按钮时,我需要它打开标准的浏览器选项,如"在新窗口中打开"或"在新选项卡中打开"。

我需要它来调用我的JS函数(从而创建弹出窗口),而不是导致标准的"otherpage.html"。

我一直在搜索,不断发现看起来像链接但行为不像链接的例子。

我已经试过IameLemon的建议了,

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

该代码有效,但是它不允许用户右键单击并访问带有链接的标准选项(在新选项卡或窗口中打开的能力)

谢谢!

将css样式应用于锚点。

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

从另一个答案中窃取。

为什么不在链接中包装一个按钮呢?这里还有一把小提琴。

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

在链接中制作一个按钮:

<a href='newtab();'><button type=button>button text</button></a>
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>