div 对话框

最新推荐文章于 2019-08-17 11:46:40 发布

原创最新推荐文章于 2019-08-17 11:46:40 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div对话框 #webfrom对话框 #.NET对话框 #c#弹出对话框 #对话框

.NET 同时被 3 个专栏收录

25 篇文章

订阅专栏

原创

17 篇文章

订阅专栏

学习总结

6 篇文章

订阅专栏

在webForm弹出对话框是一件比较麻烦的事情，一般是借用js插件，js库来完成的，
 其实有一种既简单又好用的方法，那就是用div 弹出对方框

下面我们就来详细介绍

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DIVDialog.aspx.cs" Inherits="DIVDialog" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript" language ="javascript" src="Scripts/jquery-1.4.1.min.js" ></script>
    <script type="text/javascript"  language="javascript">
        function messagebox_show1(div, msg, width) {
            $DIV = $("#" + div).css({ top: "100px", left: "10%", width: "200px" });
            $DIV.html(msg);
            $DIV.show();
            //$DIV.slideUp("slow");
        }

        function dialog() {
            messagebox_show1("MsgDiv2", "div弹出对方框", "200");

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div>
         <p>在<strong>webForm</strong>弹出对话框是一件比较麻烦的事情，一般是借用js插件，js库来完成的，
         <br />其实有一种既简单又好用的方法，那就是用div 弹出对方框</p>
         <input type="button" value="试一试"  onclick="dialog();"  id="btn_dialog"/>
           <div id="MsgDiv2" style="display: none; z-index: 28; width: 150px; position: absolute;
            height: 30px; background-color: #FFFFCC; border: #6ABAE5 solid 1px; font-size: 25px;
            font-weight: bold; color: #ff0000; text-align: center;">
        </div>
      </div>
    </div>
    </form>
</body>
</html>

效果如下：