带有重定向按钮的模态弹出窗口

Question

我确信这很简单，但我不确定如何以简单的方式实现这一点。当用户访问 mysite.com 时，我希望首先弹出一个模式。在模态框内我需要三个按钮，每个按钮在按下时指向不同的 URL。

我有一个可以正常工作的基本弹出窗口，但是我不确定如何添加按钮并使用 CSS 设置样式。

非常感谢任何帮助。使用下面的原因是它对我有用并且它保留了一个会话 cookie。

function setSessionCookie (c_name, value)
{
    document.cookie= c_name + "=" + escape(value) + ";path=/";
}

function getCookie (c_name)
{
    if (document.cookie.length>0)
    {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != - 1)
        {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape (document.cookie.substring(c_start,c_end));
        }
    }

    return "";
}


if (getCookie("bannerDisplayed").length <= 0)
{
    result = confirm("Please select one on the locations you would like to visit."); 

    if (result != true) document.location="about:blank";
    else
    {
        setSessionCookie("bannerDisplayed", "true");
    }
}

Answer 1

您无法设置确认框的样式，因为它是浏览器的默认设置。但是，您可以使用 javascript 创建自己的自定义模式。我会看一下Twitter Bootstrap 框架（对于模态和其他 JS 特定的东西也需要 jquery）。

这是一个模态示例的引导。您可以更改 CSS 以满足您的需求，还可以更新 3 个按钮的点击处理程序（连同内容）：

http://www.bootply.com/120896

HTML：

<div class="container">
  <a class="btn btn-default" id="openBtn" href="#">Open modal</a>

  <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" type="button" data-dismiss="modal">×</button>
          <h3>Modal header</h3>
        </div>
        <div class="modal-body">
          <p>My modal content here…</p>
        </div>
        <div class="modal-footer">
          <button class="btn" id="opt1" data-dismiss="modal">Option 1</button>
          <button class="btn" id="opt2" data-dismiss="modal">Option 2</button>
          <button class="btn btn-primary" id="opt3" data-dismiss="modal">Option 3</button>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript：

$('#openBtn').click(function(){
    $('#myModal').modal("show");
});

$('#opt1').click(function () {
  alert("Opt1 clicked.");
});

$('#opt2').click(function () {
  alert("Opt2 clicked.");
});

$('#opt3').click(function () {
  alert("Opt3 clicked.");
});

Answer 2

您有模态窗口的标记示例吗？您应该可以在其中添加任何标记，因此如果您要链接到 3 个不同的 URL，您只需要 3 个 a 标记，即链接到这些站点。您可以像设置任何 a 标记一样设置这些样式。