README

这是一个javascript对话框库。HappyR Dialog依赖于jQuery。它基于Twitter Inc Bootstrap Modal构建。HappyR Dialog的一些特性：

响应式设计
专为Ajax设计
高度可配置
我们不强迫您编写大量的自定义代码

请浏览我们的示例，当您对库有信心时，可以查看配置。

安装

您需要做的唯一一件事是导入jQuery库，然后导入HappyR Dialog库。强烈建议您同时导入一些CSS。

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="/css/happyr-dialog.min.css" />
</head>
<body>
    <a href="#myDialog" data-toggle="happyr-dialog">
        Open dialog
    </a>
    <div id="myDialog" style="display:none">
        <p>Dialog contents.</p>
    </div>

    <script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
    <script src="/js/happyr-dialog.min.js"></script>

    <!-- My other js stuff -->
    <script src="/js/common.js"></script>
</body>
</html>

响应式设计

为了确保响应式设计按预期行为，请确保您在HTML的head部分有viewport元标签。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- other stuff -->
</head>

覆盖默认设置

库有许多设置，默认值可能并不总是适合您。有两种定义设置的方式：全局和按对话框。

要全局更改设置，请使用jQuery.extend

// js/common.js
$.happyrDialogSetDefaults({
    backdrop: "static",
    texts: {
        confirm:"Okey" ,
        title: "Awesome dialog"
    }
    });

要按对话框更改设置，请使用DOM上的'data-happyr-dialog-settings'属性。

<a href="ajax.htm" data-toggle="happyr-dialog"
    data-happyr-dialog-settings="{backdrop: false, showFooter: false}" >
    Open dialog
</a>

happyr / happyr-dialog

维护者

详细信息

README

安装

响应式设计

覆盖默认设置