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）。

这是一个模态示例的bootply。您可以更改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个不同的网址，则只需要3个a标记即可链接到这些网站。您可以像设置任何a标记一样设置样式。

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

2 个答案: