乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • .Net中怎么实现前端对话框和消息框-创新互联

    这期内容当中小编将会给大家带来有关.Net中怎么实现前端对话框和消息框，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

    成都创新互联专业为企业提供泗县网站建设、泗县做网站、泗县网站设计、泗县网站制作等企业网站建设、网页设计与制作、泗县企业网站模板建站服务，十余年泗县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

    画一个简单的模型框

    
    系统提示
             
                           

    添上基本的样式

    div.hi-dialog-box {
      border: 1px #808080 solid;
      width: 350px;
      height: 200px;          
      border-radius: 3px;
    }
      div.hi-dialog-box div.hi-dialog-title {
        border: 1px #808080 solid;
        margin: 1px;
        padding: 1px;
        background-color: #dedcdc;
        height: 14%;
        cursor: move;
        font-size: 20px;
      }
      div.hi-dialog-box div.hi-dialog-content {
        height: 65%;
        margin: 5px;      
      }
      div.hi-dialog-box div.hi-dialog-foot {
        margin: 1px;
        padding: 1px;
        height: 14%;
      }
        div.hi-dialog-box div.hi-dialog-foot input {
          float: right;
          margin-left: 5px;
          font-size: 16px;
        }

    效果图：

    .Net中怎么实现前端对话框和消息框

    是不是像那么回事了，不过现在还不能拖动。拖动，说白了就是在鼠标移动的时候不停的修改绝对定位。

    首先修改以下样式：

    .Net中怎么实现前端对话框和消息框

    用js代码实现拖动效果：

    //鼠标按下时
    $("div.hi-dialog-title").mousedown(function (event) {
      $("html").unbind();//首先清除事件方法
      var click_clientX = event.clientX;//记录鼠标按下时相对当前窗口的 x 坐标
      var click_clientY = event.clientY;//记录鼠标按下时相对当前窗口的 y 坐标
      //取的对话框容器
      var dialogBox = $(this).closest("div.hi-dialog-box");
      //记录对话框容器当前位置
      var dialogBoxX = parseInt($(dialogBox).css("left"));
      var dialogBoxY = parseInt($(dialogBox).css("top"));
      //鼠标移动时
      $("html").mousemove(dialog_mousemove = function (event) {
        //鼠标按下后移动量加上原来的位置
        var top = event.clientY - click_clientY + dialogBoxY;
        var left = event.clientX - click_clientX + dialogBoxX;
        //修改对话框位置（这里就实现了移动效果了）
        $(dialogBox).css({ "left": left, "top": top });
      });
      //鼠标按键松开时
      $("html").mouseup(function () {
        //清除鼠标移动事件
        $("html").unbind("mousemove", dialog_mousemove);
      });
    });

    以上js代码就实现了对话框的拖动效果。首先，只有当鼠标在对话框标题区域按下鼠标才可以拖动，然后鼠标移动的的时候实时计算和改变容器的位置，最后如果鼠标按键松开这清除鼠标移动事件。

    .Net中怎么实现前端对话框和消息框

    点击按钮后可回调

    很多时候，我们点击确定或取消的时候我们需要执行回调（比如“您是否删除”，点击了确定后肯定需要做删除操作）。

    .Net中怎么实现前端对话框和消息框

    如此，我们点击确定的时候会自动关闭对话框并可以执行自己需要执行的一些操作。可以，有同学会说，你这算什么狗屁对话框啊，html代码全都需要直接编码。是的，这只是简单的说下思路，下面我们来简单整理下。

    .Net中怎么实现前端对话框和消息框

    效果图：

    .Net中怎么实现前端对话框和消息框

    全部代码：（当然，这只是简单实现。还有很多需要继续细化的效果，如：背景遮罩、如果实现点击多次对话框）

    


  
  
  
    * {
      box-sizing: border-box;
    }
    .clearfix:after {
      content: ' ';
      display: table;
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
    div.hi-dialog-box {
      border: 1px #808080 solid;
      width: 350px;
      height: 200px;
      position: absolute;
      top: 200px;
      left: 40%;
      border-radius: 3px;
    }
      div.hi-dialog-box div.hi-dialog-title {
        border: 1px #808080 solid;
        margin: 1px;
        padding: 1px;
        background-color: #dedcdc;
        height: 14%;
        cursor: move;
        font-size: 20px;
      }
      div.hi-dialog-box div.hi-dialog-content {
        height: 65%;
        margin: 5px;
        overflow: auto;
      }
      div.hi-dialog-box div.hi-dialog-foot {
        margin: 1px;
        padding: 1px;
        height: 14%;
      }
        div.hi-dialog-box div.hi-dialog-foot input {
          float: right;
          margin-left: 5px;
          font-size: 16px;
        }
  


  
  
  
  
  
    var hiDialog = {
      init: function (title, messg, determineCallback, cancelCallback) {
        title = title || "系统提示";
        var determine = "", cancel = "";
        if (typeof (determineCallback) == "function")
          determine = '';
        if (typeof (cancelCallback) == "function")
          cancel = '';
        if (!$("div.hi-dialog-box").length) {
          var hi_dialog_box = '\
                  \
                  \
                  \
                  \
                  \
                ';
          $("body").append(hi_dialog_box);
        }
        var $box = $("div.hi-dialog-box");
        $box.find("div.hi-dialog-title").html(title);
        $box.find("div.hi-dialog-content").html(messg);
        $box.find("div.hi-dialog-foot").html(determine + cancel);
        $("div.hi-dialog-box").show();
        $box.find(".hi-dialog-determine").click(function () {
          determineCallback();
          hiDialog.close();
        });
        $box.find(".hi-dialog-cancel").click(function () {
          cancelCallback();
          hiDialog.close();
        });
        //鼠标按下时
        $("div.hi-dialog-title").mousedown(function (event) {
          $("html").unbind();
          var click_clientX = event.clientX;
          var click_clientY = event.clientY;
          var dialogBox = $(this).closest("div.hi-dialog-box");
          var dialogBoxX = parseInt($(dialogBox).css("left"));
          var dialogBoxY = parseInt($(dialogBox).css("top"));
          //鼠标移动时
          $("html").mousemove(dialog_mousemove = function (event) {
            var top = event.clientY - click_clientY + dialogBoxY;
            var left = event.clientX - click_clientX + dialogBoxX;
            $(dialogBox).css({ "left": left, "top": top });
          });
          //鼠标按键松开时
          $("html").mouseup(function () {
            $("html").unbind("mousemove", dialog_mousemove);
          });
        });
      },
      close: function () {
        $("div.hi-dialog-box").hide();
      }
    }
  
  
    function click1() {
      hiDialog.init("系统提示！", "测试", function () {
        //点击确定后的回调执行
        $(".messg").text("点击了确定");
      });
    }
    function click2() {
      hiDialog.init("系统对话框~~", "什么乱七八糟的啊...", function () {
        $(".messg").text("点击了确定~~~");
      }, function () {
        $(".messg").text("点击了取消~~");
      });
    }
  

    消息框

    要求：自动定时关闭消息框、有消息分类（如：警告、错误、成功等）

    画一个简单的模型框

    
    
    你不爱我了~~
  

    添上基本样式

    
    div.hi-message-box {
      padding: 10px;
      padding-top: 15px;
      padding-bottom: 20px;
      background-color: #aee0c1;     
      min-width: 200px;
      max-width: 500px;
      font-size: 19px;
      border-radius: 3px;
    }
 

    效果图：

    .Net中怎么实现前端对话框和消息框

    看上去是不是很简单呢？下面我们给它加上定时关闭消息功能。

    定时关闭消息（表骂我，就是这么简单。我也想写复杂的。）

    复制代码 代码如下:

    setTimeout(function () { $("div.hi-message-box").fadeOut("slow");}, 1200);

    效果图：

    .Net中怎么实现前端对话框和消息框

    加上消息类型（其实就是根据参数加不同的图片而已）

    setTimeout(function () {
      $("div.hi-message-box").fadeOut("slow");
}, 1200);

    效果图：

    .Net中怎么实现前端对话框和消息框

    加上图标是不是更像那么回事了？

    如上，我们同样需要稍微整理下实现代码：

    .Net中怎么实现前端对话框和消息框

    效果图：

    .Net中怎么实现前端对话框和消息框

    全部代码：（同样，消息框也只是进行了简单实现。还有太多没有考虑，如（参数定位消息框位置、设置定时关闭时间、多次触发消息框））

    


  
  
  
    * {
      box-sizing: border-box;
    }
    .clearfix:after {
      content: ' ';
      display: table;
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
    div.hi-message-box {
      padding: 10px;
      padding-top: 15px;
      padding-bottom: 20px;
      background-color: #aee0c1;
      position: absolute;
      min-width: 200px;
      max-width: 500px;
      font-size: 19px;
      border-radius: 3px;
      top:200px;
      left:45%;
    }
      div.hi-message-box img {
        vertical-align: bottom;
      }
  


  
  
  
  
  
    var hiMessageBox = {
      init: function (type, messg) {
        var hiMessageBox = '\
                  \
                  \
                ';
        if (!$("div.hi-message-box").length) {
          $("body").append(hiMessageBox);
        }
        var $box = $("div.hi-message-box");
        $box.find(".hi-message-messg").text(messg);
        switch (type) {
          case 0://success 成功
            $box.find("img.hi-message-type").attr("src", "imgs/Tick_24px.png")
            break;
          case 1://warn 警告
            $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
            break;
          case 2://
            $box.find("img.hi-message-type").attr("src", "imgs/Delete_24px.png")
            break;
        }
        $("div.hi-message-box").fadeIn("slow")
        setTimeout(function () {
          $("div.hi-message-box").fadeOut("slow");
        }, 1200);
      },
      success: function (messg) {
        this.init(0, messg); 
      },
      warn: function (messg) {
        this.init(1, messg);
      },
      error: function (messg) {
        this.init(2, messg);
      }
    };   
  
  
    function success() {
      hiMessageBox.success("成功");
    }
    function error() {
      hiMessageBox.error("失败");
    }
    function warn() {
      hiMessageBox.warn("警告");
    }
  

    上述就是小编为大家分享的.Net中怎么实现前端对话框和消息框了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。


    本文名称：.Net中怎么实现前端对话框和消息框-创新互联
    当前路径：http://lszwz.com/article/deoshh.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    关键词优化   成都二枢机房   手机网站制作设计   无边发光字   抖音代运营   微信服务号订阅号开发   西云服务器托管   重庆企业网站建设   主动防护网   达州网站建设   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25