javascript - 显示禁用按钮的弹出框

Question

我有一个使用 twitter bootstrap js 和 css 的表单。在我的表单中存在两个按钮。一键提交表单并将用户发送到某个地方。另一个按钮显示一个弹出对话框。

我需要第二个按钮不可点击但显示弹出框。

当我完全禁用按钮时，不会显示弹出框，当我不禁用按钮时，它会转到表单的操作页面。我怎样才能解决这个问题？

http://jsfiddle.net/wnTUV/6/

<form class="well span3" action="/gosomeplace/" method="post">

    <div class="span3">

        <button type="submit" class="btn btn-info btn-large" href="gosomeplace/">
        <i class="icon-user icon-white"></i>
        Go now
    </button>
    </div>

    <div class="span3">
    <button class="btn disabled" rel="popover"
            title="Some title"
            data-content="Some content"
        >
        <i class="icon-question-sign"></i>
    </button>
        </div>


</form>

Answer 1

您是否尝试过使用 onclick 并返回 false，或者这是否也会阻止弹出窗口？您需要保持该按钮处于启用状态，但这应该会阻止它提交表单。

<button onclick="return false;" class="btn disabled" rel="popover"
        title="Some title"
        data-content="Some content">

如何防止按钮提交表单

Answer 2

您可以通过跨度添加包装按钮，并添加 style="display: inline-block;"到此跨度。以下是一个例子。

<span style="display: inline-block;" popover="XXX" popover-trigger="mouseenter">
<button class="disabled">确定</button>
</span>