我的要求是用css属性自定义警报框。目前我正在通过以下代码实现类似的目标:
JQUERY:
$('<div class="alertMessage">Error first</div>')
.insertAfter($('#componentName'))
.fadeIn('fast')
.animate({opacity: 1.0}, 2200)
.fadeOut('fast', function() {
$(this).remove();
});
CSS:
.alertMessage {
width: 95%;
margin: 1em 0;
padding: .5em;
background-image: -ms-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
background-image: -moz-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
background-image: -o-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #F07E1A), color-stop(1, #F58CCB));
background-image: -webkit-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
background-image: radial-gradient(circle farthest-corner at left top, #F07E1A 0%, #F58CCB 100%);
text-align: center;
border: 3px solid white;
color: white;
font-weight: bold;
border-radius:4px;
display: none;
}
上面的代码将在几秒钟后淡入和淡出。此外,淡入和淡出将发生在我在代码中提到的组件旁边
insertAfter($('#componentName'))
我的要求是:
- 警报消息应出现在窗口的中央。就像普通的警告框一样
- 警报消息应该有一个“确定”按钮。就像普通的警报框一样。
我是否只能通过向 div 添加“确定”按钮并为“确定”按钮添加行为来实现此目的。或者有什么方法可以扩展通用警报框行为并使用我上面提到的 css 属性对其进行自定义?如果是,如何实现?
最佳答案
您需要自己实现外观和行为,标准警报框不可自定义。
当您已经使用 jQuery 时,另一种选择是使用 jQueryUI 提供的功能。 .
关于javascript - 如何自定义警报框的CSS字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17273228/