html提醒框ui,弹出框.html

弹出框

.popover-content .btn {

padding: 0 10px;

}

.popover-btn {

text-align: right;

}

点我弹出/隐藏弹出框

点我弹出弹出框

悬浮出现弹出框

Tooltip on left

Tooltip on top

Tooltip on bottom

Tooltip on right

Hover over me

Hover over me

Hover over me

Hover over me

Hover over me

提示弹出框

$(function() {

$('[data-toggle="tooltip"]').tooltip()

})

$(function() {

var template = [

'

',

'

'

'

'

'

].join("");

//var title = ['

SELECT A DATE

'].join("");

var content = [

'

Do you confirm to cancel this order? this

',

'

No',

' Yes

'

].join("");

$('#popover1').popover({

html: true,

trigger: "click",

placement: 'bottom',

// title: title,

content: content,

template: template

});

$('#popover2').popover({

html: true,

trigger: "fouce",

placement: 'bottom',

// title: title,

content: content,

template: template

});

$('#popover3').popover({

html: true,

trigger: "hover",

placement: 'bottom',

// title: title,

content: content,

template: template

});

})

$(function() {

var template = [

'

',

'

'

'

'

'

].join("");

var title = [

'Title',

'×'

].join("");

var content = [

'

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content ContentCont.

',

].join("");

$(".popover-close").click(function() {

alert(1)

$(this).parent().parent().hide()

})

$('#popover11').popover({

html: true,

trigger: "hover",

// placement: 'bottom',

title: title,

content: content,

template: template

});

$('#popover22').popover({

html: true,

trigger: "hover fouce",

placement: 'bottom',

title: title,

content: content,

template: template

});

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史