HTML 페이지에서 물음표를 클릭하면 프롬프트 상자가 나타납니다(소스 코드 첨부).
- 不言앞으로
- 2019-01-23 10:04:598110검색
이 문서의 내용은 HTML 페이지에서 물음표를 클릭하여 프롬프트 상자(소스 코드 첨부)를 표시하는 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 너.
이 데모의 기능: 페이지 버튼을 클릭하면 가장자리에 프롬프트 메시지가 표시되고, 페이지의 아무 곳이나 클릭하면 사라집니다.
아래와 같이: 
1. 필수 플러그인:
jquery 플러그인;
2. 참고 ==:
data-tips 속성이 필요합니다.
- data-tips 속성: 유형: "1"은 수정할 필요가 없습니다.
- data-tips 속성: txt 콘텐츠는 메시지를 표시할 콘텐츠입니다.
-
<html> <head> <link rel="stylesheet" href="style.css"" type="text/css" /> </head> <body> <div style="margin-top: 10%; margin-left: 10%;"> <span class="testSpan"> <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容111..."}'>①</i> </span> <span style="margin: 30px;"> <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容222..."}'>②</i> </span> <span style="margin: 30px;"> <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容333..."}'>③</i> </span> </div> </body> <!-- jquery --> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- layer --> <script src="layer/layer.js" type="text/javascript"></script> <!-- 提示插件 --> <script src="script.js" type="text/javascript"></script> <script> $(function(){ <!-- 页面初始化加载 --> var tips = new helpTips().init(); }) </script></html>3.css 콘텐츠: (필요하지 않음) - 이 데모의 CSS는 필요하지 않으며 기능에 영향을 주지 않습니다.
.edi-icon {
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscale;
*display: inline;
*zoom: 1;
cursor: pointer;
}
4.javascript 콘텐츠: (핵심) //定义提示弹出框；
var helpTipsLayer;
//定义弹出框的默认设置；
function helpTips(t) {
this.options = {},
this.options.elem = ".j-help-tips", //与页面class相对应；
this.options.type = 1,
this.options.color = "#8db3d7",
this.options.time = 0, //设置0是提示弹出框不会自动消失；可设置为其他数字，以毫秒为单位；
this.options.titleEnd = "录入提示",
this.options.width = "600px",
this.options.height = "",
this.options.imgWidth = "233",
this.options.imgHeight = "375",
"undefined" != typeof t && (this.options = $.extend({}, this.options, t)),
this.elemObj = $(this.options.elem)
}
!
function() {
//点击页面任何一处可使提示弹出框消失；
$(document).on("click", function(event){
var e = event || window.event;
var target = e.target || e.srcElement;
var flag = $(target).hasClass("j-help-tips");
if(helpTipsLayer && !flag){
layer.close(helpTipsLayer);
}
})
}(), helpTips.prototype = {
constructor : helpTips,
init : function() {
this.bindEvent()
},
bindEvent : function() {
var t = this;
t.elemObj.on("click", function() {
layer.close(helpTipsLayer);//点击其他任意的提示框按钮，则关闭上一个提示框。
var i = $(this),
o = i.data("tips");
if ("undefined" != typeof o && "undefined" != typeof o.type && 1 == o.type) {
"undefined" != typeof o && "undefined" != typeof o.txt ? helpTipsLayer = layer.tips(o.txt, i, {
tips : [ t.options.type, t.options.color ],
time : t.options.time
}) : t.log()
} else {
if ("undefined" != typeof o.title && "undefined" != typeof o.txt && "undefined" != typeof o.img) {
var e = '<p class="m-popup-ct">',
n = '<h3 class="tt"><span class="txt_01">' + o.title + t.options.titleEnd + '</span></h3><p class="line_01"></p>',
s = "</p>",
l = '<ul class="u-explain-list">',
p = o.txt.split("|"),
a = p.length;
a > 0 && $.each(p, function(t, i) {
l += '<li><i class="f-mr5">' + (t + 1) + "</i>" + i + "</li>"
});
var r = /^[1-9][\d]{0,2}$/,
c = t.options.imgWidth,
d = t.options.imgHeight;
"undefined" != typeof o.w && "undefined" != typeof o.h && r.test(o.w) && r.test(o.h) && (c = o.w, d = o.h), l += '<li><i class="f-mr5">' + (a + 1) + "</i><img src=" + o.img + ' width="' + c + '" height="' + d + '"/></li>', l += "</ul>";
var h = e + n + l + s;
layer.open({
title : !1,
type : 1,
area : [ t.options.width, t.options.height ],
shadeClose : !0,
maxmin : !1,
move : !1,
scrollbar : !1,
content : h
})
} else {
t.log()
}
}
})
},
log : function() {
console.log("请给定提示标题|文字|图片---来自[script.js]函数[helpTips]")
}
};위 내용은 HTML 페이지에서 물음표를 클릭하면 프롬프트 상자가 나타납니다(소스 코드 첨부).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제