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

我相信这很简单，但我不知道如何以简单的方式实现这一点。当用户访问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");
    }
}

函数setSessionCookie（c_名称、值）
{
document.cookie=c_name+“=”+转义（值）+“路径=/”；
}
函数getCookie（c_名称）
{
if（document.cookie.length>0）
{
c_start=document.cookie.indexOf（c_name+“=”）；
如果（c_开始！=-1）
{
c_start=c_start+c_name.length+1；
c_end=document.cookie.indexOf（“；”，c_start）；
如果（c_end==-1）c_end=document.cookie.length；
返回unescape（document.cookie.substring（c_start，c_end））；
}
}
返回“”；
}
if（getCookie（“bannerDisplayed”）.length您有模式窗口标记的示例吗？您应该能够在其中添加任何标记，因此如果您链接到3个不同的URL，您只需要3个链接到这些站点的
a
标记。您可以按照设置任何
a
标记的方式设置这些标记的样式。
您不能设置确认框的样式，因为它是默认的但是，您可以使用javascript创建自己的自定义模式。我将介绍框架（模式和其他特定于JS的东西也需要jquery）

下面是一个模式示例的引导。您可以更改CSS以满足您的需要，还可以更新3个按钮的单击处理程序（以及内容）：


HTML:

我所做的是将.js文件放在要首先加载的HTML的顶部。js文件将使用一些HTML来显示弹出窗口-这个HTML是什么样子的？非常感谢我可以使用这个示例。有一件事我如何向其中添加会话cookie？您应该能够像在b中那样调用getCookie和setSessionCookie之前。很难给出更具体的示例，因为我不知道您想要实现什么。如果您需要在用户在模式中进行选择时设置会话cookie，那么这将进入其中一个单击处理程序以获取选项。如果需要，您还可以在显示模式之前检查cookie（类似于您在上面的确认框中所做的操作）。我下载了上面的JS，并根据我的需要对其进行了轻微修改。我希望在用户关闭浏览器之前，只提示用户一次模式。
<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>

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

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

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

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