基于jQuery的模态框

本文主要是介绍基于jQuery的模态框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章转载自：http://motyer.cn/Blog/Details/blog2016101519493910

在前端开发中，模态框是经常使用到的一个工具。撇开alert、confirm等自带的不谈，下面介绍一款使用jQuery来简单实现的提示框、确认框和输入框——MotyDialog。

  在使用前需要引入样式文件dialog.css，脚本文件dialog.min.js。由于是基于jQuery的，所以必须在引入dialog.min.js前引入jQuery。

一、提示框

dialog.tip(title, text, ok);

   该方法具有三个参数：

            1、title，字符串类型，提示框的标题；

            2、text，字符串类型，提示框提示的具体内容；

            3、ok，function类型，点击提示框确定按钮的回调函数。

dialog.tip("提示", "这是一个提示框。", function(){ alert("您关闭了提示框。"); });

二、确认框

dialog.confirm(title, text, ok, cancel);

         该方法有四个参数：

            1、title，同上；

            2、text，同上；

            3、ok，function类型，点击确定按钮的回调函数；

            4、cancel，function类型，点击取消按钮的回调函数。

dialog.confirm("确认", "请确认你有没有女朋友？", function(){alert("有。"); }, function(){ alert("没有。"); });

三、输入框

dialog.input(title, text, placeholder, ok, cancel);

          该方法有5个参数：

            1、title，同上；

            2、text，字符串类型，输入框的初始化文本；

            3、placeholder，字符串类型，输入框的提示文本；

            4、ok，点击确定按钮的回调函数，并且带一个字符串类型的参数，表示在输入框中已输入的文本内容；

            5、cancel，点击取消按钮的回调函数，并且带一个字符串类型的参数，表示在输入框中已输入的文本内容。

dialog.input("输入", "", "请输入姓名", function(t){ alert(t); }, function(t){ alert(t); });

        源代码已经托管在github上面了，有兴趣的可以下载看看，也可以帮助完善。

        https://github.com/liujian619/MotyDialog

这篇关于基于jQuery的模态框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---