html 点击提示并消失,【已解决】用Bootstrap给html中添加显示后可以消失掉的提示或警告...

折腾：

期间，想要去给用户一个提示，让用户手动点击播放按钮，才能播放音乐。

看到文档中有：

去试试

不过发现：

tooltip貌似更加适合此处场景？

难道是tooltip必须手动点击才可以？

好像是可以代码控制显示和消失的。

bootstrap dismissable tip

bootstrap dismissable alert

期间：

此处，暂时不用自动消失的那种了

也不用显示后，用visibility是show还是hidden -》 否则还占用html的显示空间，不好看

而是：需要显示时，插入显示

用于点击x去自己关闭即可

而插入显示，则需要去：

【总结】

目前用如下代码：

var audioElt = $(".audio_player audio");

console.log("audioElt=%o", audioElt);

var audioObject = audioElt[0];

console.log("audioObject=%o", audioObject);

var playAudioPromise = undefined;

playAudioPromise = audioObject.play();

if (playAudioPromise !== undefined) {

playAudioPromise.then(() => {

// Auto-play started

console.log("Auto paly audio started, playAudioPromise=%o", playAudioPromise);

//for debug

showAudioPlayPreventedNotice();

}).catch(error => {

// Auto-play was prevented

// Show a UI element to let the user manually start playback

// showAudioPlayPreventedNotice();

console.error("play audio promise error=%o", error);

//NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

});

}

function showAudioPlayPreventedNotice(){

console.log("showAudioPlayPreventedNotice");

// var prevDisplayValue = $("#audio_play_prevented").css("display");

// console.log("prevDisplayValue=%o", prevDisplayValue);

// $("#audio_play_prevented").css({"display":"block"});

var curAudioPlayPreventedNoticeEltHtml = $("#audio_play_prevented").html();

console.log("curAudioPlayPreventedNoticeEltHtml=%o", curAudioPlayPreventedNoticeEltHtml);

if (curAudioPlayPreventedNoticeEltHtml !== undefined) {

console.log("already exist audio play prevented notice, so not insert again");

} else {

var audioPlayPreventedNoticeHtml = ‘

x Notice: Auto play prevented, please mannually click above play button to play

’;

console.log("audioPlayPreventedNoticeHtml=%o", audioPlayPreventedNoticeHtml);

$(".audio_player").append(audioPlayPreventedNoticeHtml);

}

}

然后，效果是：

再次想要插入提示，发现已经存在，就不插入提示了：

手动点击关闭后：

再去运行，可以继续插入提示：