Показать всплывающее окно по выбору

-4

Я пытаюсь показать всплывающее окно на странице по выбранному значению параметра. Мне нужно проверить значение в опции выбора, и если оно соответствует, всплывающее окно должно отображаться. Но я не могу показать всплывающее окно в выбранных вариантах изменений. Также я хочу, чтобы всплывающее окно отображалось каждый раз, когда пользователь выбирает эту опцию. Просьба сообщить.Показать всплывающее окно по выбору

Here is my code: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <title>jQuery Popup Dialog - Click</title> 
     <style type="text/css"> 
      #overlay { 
       position: fixed; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       background-color: #000; 
       filter:alpha(opacity=70); 
       -moz-opacity:0.7; 
       -khtml-opacity: 0.7; 
       opacity: 0.7; 
       z-index: 100; 
       display: none; 
      } 
      .content a { 
       text-decoration: none; 
      } 
      .popup { 
       width: 100%; 
       margin: 0 auto; 
       display: none; 
       position: fixed; 
       z-index: 101; 
      } 
      .content { 
       min-width: 600px; 
       width: 600px; 
       min-height: 200px; 
       margin: -13px; 
       background: #f3f3f3; 
       position: relative; 
       z-index: 103; 
       padding: 10px; 
       border-radius: 5px; 
       box-shadow: 0 2px 5px #000; 
      } 
      .content p { 
       clear: both; 
       color: #555555; 
       text-align: justify; 
      } 
      .content p a { 
       color: #d91900; 
       font-weight: bold; 
      } 
      .content .x { 
       float: right; 
       height: 35px; 
       left: 22px; 
       position: relative; 
       top: -25px; 
       width: 34px; 
      } 
      .content .x:hover { 
       cursor: pointer; 
      } 
     </style> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
     <script type='text/javascript'> 
      $(document).ready(function() { 

       $('#DisplayShippingSpeedChoicesTD').parent().parent().parent().attr("id", "shipTable"); 
       $('#shipTable select').attr('id', 'shipOption'); 

       $('#shipOption').change(function() { 
        var value1 = ($('#shipOption option:selected').val()); 
        //  alert(value1); 
        if ((value1 === "701")) { 

         //alert(value1); 
         $('.popup').show(); 
        } 


       }); 

      }); 







      $(function() { 
       var overlay = $('<div id="overlay"></div>'); 
       $('.close').click(function() { 
        $('.popup').hide(); 
        overlay.appendTo(document.body).remove(); 
        return false; 
       }); 

       $('.x').click(function() { 
        $('.popup').hide(); 
        overlay.appendTo(document.body).remove(); 
        return false; 
       }); 

       $('.click').click(function() { 
        overlay.show(); 
        overlay.appendTo(document.body); 

        return false; 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class='popup'> 
      <div class='content'> 
       <img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' /> 
       <h1>ATTENTION</h1> 

       <p>We do NOT recommend using UPS GROUND for customers who do NOT live in the immediate surrounding states of Florida. Reason being is that UPS Ground is ground transport from us to you. So if you live in a state far away and select this please note that it can take up to 5 business days. If you wish to still use UPS, we recommend UPS 3 Day select as an alternative for our customers who do not live near our company. 
        <br/> 
        <br/> <a href='' class='close'>Close</a> 

       </p> 
      </div> 
     </div> 
     <div id='container' style=" display:none;"> <a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> 
      <br/> 
     </div> 
    </body> 

</html>

источник

2013-08-10 Neha

Я не вижу ваш '