jquery + Css 強制回應對話方塊

來源:互聯網
上載者:User

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>強制回應對話方塊樣本</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
     <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
     $(function () {
         $(".selTree").live("click",function () { $(".empTree,.bgDiv").show(); });
         $(".close").live("click",function () {
            $(this).parents(".shq,.box").hide();
            $(".bgDiv").hide();
            });
          
 
     });
     </script>
     <style type="text/css" >
  .bgDiv{position:absolute;top:0px; background:url(../images/divBg2.png); display:none;width:100%;height:100%}
  .shq{ width:507px; height:488px; border:5px solid #219ACF; position:absolute;margin-left:-253px;left:50%;top:60px; background:#EBF3F6; display:none}
  .boxHead{ width:100%; height:27px; background:url(../images/box_bg.jpg) repeat-x;}
  .boxHead div{margin-left:10px}
  .shTitle{margin-left:10px; height:25px; line-height:25px; float:left}
  .shClose{width:20px; cursor:pointer; float:right; color:#94938E; font-weight:bold;font-size:16px;height:25px; line-height:25px;}
    </style>
 </head>
 
 <body>
    <input type="button" id="button" value="強制回應對話方塊"  class="selTree" />

    <!--選擇查看 -->
    <div class="bgDiv"></div>
        <div class="shq empTree" name="shq" style="height:425px; width:425px; display:none">
        <div class="boxHead">
          <div class="shTitle">選擇查看</div>
          <div class="shClose close">×</div>
        </div>
              asdfasdfasdf
              <input type="submit" name="button2" id="button2" value="確定" class="btn close"/>
             <input type="submit" name="button3" id="button3" value="取消" class="btn close"/>
    </div>
 </body>
</html>

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>強制回應對話方塊樣本</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
     <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
     $(function () {
         $(".selTree").live("click",function () { $(".bgDiv,.empTree").show(); });
         $(".close").live("click",function () {
            $(this).parents(".shq,.box").hide();
            $(".bgDiv").hide();
            });
            $(".bgDiv").height($(document).height());
            $(".close").live("click",function () {
               $(this).parents(".shq,.box").hide();
               $(".bgDiv").hide();
             });

     });
     </script>
     <style type="text/css" >
  .bgDiv{position:absolute;top:0px; background:url(../images/divBg2.png); display:none;width:100%;height:100%}
  .shq{ width:507px; height:488px; border:5px solid #219ACF; position:absolute;margin-left:-253px;left:50%;top:60px; background:#EBF3F6; display:none}
  .boxHead{ width:100%; height:27px; background:url(../images/box_bg.jpg) repeat-x;}
  .boxHead div{margin-left:10px}
  .shTitle{margin-left:10px; height:25px; line-height:25px; float:left}
  .shClose{width:20px; cursor:pointer; float:right; color:#94938E; font-weight:bold;font-size:16px;height:25px; line-height:25px;}
    </style>
 </head>
 
 <body>
    <input type="button" id="button" value="強制回應對話方塊"  class="selTree" />

    <!--選擇查看 -->
    <div class="bgDiv"></div>
        <div class="shq empTree" name="shq" style="height:425px; width:425px; display:none">
        <div class="boxHead">
          <div class="shTitle">選擇查看</div>
          <div class="shClose close">×</div>
        </div>
              asdfasdfasdf
              <input type="submit" name="button2" id="button2" value="確定" class="btn close"/>
             <input type="submit" name="button3" id="button3" value="取消" class="btn close"/>
    </div>
 </body>
</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.