CODEWITHSUNDEEP
javascriptcssmodal-dialog
JA1
JA1

Reputation: 568

Modal popup with redirect button

I am sure this is simple, but I am not sure how to achieve this in a simple manner. When users go to mysite.com I would like for a modal to popup first. Inside the modal I need to have three buttons, each button points to a different URL when pushed.

I have a basic popup that works fine, howevert I am not sure how to add in the button and also style it with CSS.

Any help is greatly appreciated. The reason for the usage of the one below is it worked for me and it retained a session 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");
    }
}

Upvotes: 0

Views: 6803

Answers (2)

Patrick
Patrick

Reputation: 6958

You can't style a confirm box as it is default with the browser. However, you can use javascript to create your own custom modal. I would look at Twitter Bootstrap framework (also required jquery for the modal and other JS specific stuff).

Here is a bootply of a modal example. You can change the CSS to meet your needs and also update the click handlers of your 3 buttons (along with the content):

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.");
});

Upvotes: 2

Gary Stevens
Gary Stevens

Reputation: 693

Do you have an example of the markup for your modal window? You should be able to add any markup inside this, so if you are linking to 3 different URLs, you just need 3 a tags, that link to those sites. You can style these the same way you style any a tag.

Upvotes: 0

Related Questions