现在的位置: 首页 > 综合 > 正文

jquery + Css 模式对话框

2012年09月28日 ⁄ 综合 ⁄ 共 3767字 ⁄ 字号 评论关闭

<!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>

抱歉!评论已关闭.