我想在此swal警报中添加带有简单形式的样式的表单,如form example
<div id="centerprize" style="display: ;">
<a href='#' class="modal-btnprize">Win Prize</a>
</div>
<script type="text/javascript">
$(".modal-btnprize").click(function() {
var list='<div class="form-group">'+'<label for="InputName">YourName</label>'+
'<div class="input-group">'+
'<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>'+
'<span class="input-group-addon"><i class="fa fa-twitter"></i></span></div>'+
'</div>'
swal({
title: "Eligibility Criteria",
allowOutsideClick:true,
text: list,
html:true,
});
});
</script>
答案 0 :(得分:0)
您的'list'(包含html元素)变量应该是html而不是我的代码段中显示的文本。此外,你正在使用Bootstrap的输入类,所以我想你也可以添加bootstrap和font-awesome如果你想实现这个 form
您还可以在swal查看更新。
$(".modal-btnprize").click(function() {
var list='<div class="form-group">'+'<label for="InputName">YourName</label>'+
'<div class="input-group">'+
'<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>'+
'<span class="input-group-addon"><i class="fa fa-twitter"></i></span></div>'+
'</div>'
swal({
title: "Eligibility Criteria",
allowOutsideClick:true,
text: 'Not html here',
html: list,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.4/sweetalert2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.4/sweetalert2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="centerprize" style="display: ;">
<a href='#' class="modal-btnprize">Win Prize</a>
</div>
希望这有帮助! :)
答案 1 :(得分:0)
我猜你的意思是你没有看到你的HTML正确。这是因为sweetalert有一个名为display:block
的CSS类。它具有属性display:none;,只有在您更改swal类型时才会消失。但在您的情况下,只需使用inline-block
或 #code with y axis on both
library(ggplot2)
library(cowplot)
p1<-ggplot(clins, aes(x = Clinician, y = slope, ymin = slope - 2 * se, ymax = slope + 2 * se)) + geom_point(color="blue") + geom_errorbar(colour="blue") + scale_y_continuous(limits=c(-0.16,1), breaks=c(-0.16, 0.00, 0.25, 0.50, 0.75, 1.00), labels=c("", "0.00", "0.25", "0.50", "0.75", "1.00"), expand=c(0,0)) + theme(axis.ticks.y=element_line(colour=c("transparent", "black", "black", "black", "black", "black")), panel.border=element_rect(colour="black", fill=NA), text=element_text(family="Times New Roman", face="bold", size=12), panel.background=element_rect(fill="white"), panel.grid.major.x=element_blank(), panel.grid.major.y=element_line(size=.1, colour="black",linetype="dotted"), plot.title=element_text(hjust=0.5), axis.text.x=element_text(colour="black", angle=60, hjust=1), axis.text.y=element_text(colour="black")) + labs(y= "Slope")
p2<-ggplot(vigns, aes(x = Vignette, y = slope, ymin = slope - 2 * se, ymax = slope + 2 * se)) + geom_point(colour="red") + geom_errorbar(colour="red") + scale_y_continuous(limits=c(-0.16,1), breaks=c(-0.16, 0.00, 0.25, 0.50, 0.75, 1.00), labels=c("", "0.00", "0.25", "0.50", "0.75", "1.00"), expand=c(0,0)) + theme(axis.ticks.y=element_line(colour=c("transparent", "black", "black", "black", "black", "black")), panel.border=element_rect(colour="black", fill=NA), text=element_text(family="Times New Roman", face="bold", size=12), panel.background=element_rect(fill="white"), panel.grid.major.x=element_blank(), panel.grid.major.y=element_line(size=.1, colour="black",linetype="dotted"), plot.title=element_text(hjust=0.5), axis.text.x=element_text(colour="black", angle=20, hjust=1), axis.text.y=element_text(colour="black")) + labs(y= "Slope")
plot1<- plot_grid(p1, p2, align = 'h')
title<- ggdraw() + draw_label("Slope Coefficients by Clinician and Vignette", fontface='bold', fontfamily='Times New Roman')
svg("Plot1.svg",width=10,height=4.00)
plot_grid(title, plot1, ncol=1, rel_heights=c(0.1,1))
dev.off()
#code with y axis removed for second plot
p3<-ggplot(vigns, aes(x = Vignette, y = slope, ymin = slope - 2 * se, ymax = slope + 2 * se)) + geom_point(colour="red") + geom_errorbar(colour="red", width=.15) + scale_y_continuous(limits=c(-0.16,1), breaks=c(-0.16, 0.00, 0.25, 0.50, 0.75, 1.00), labels=c("", "0.00", "0.25", "0.50", "0.75", "1.00"), expand=c(0,0)) + scale_x_discrete(expand=c(0,0)) + theme(axis.title.y=element_blank(), axis.text.y=element_blank(), axis.ticks.y=element_blank(), panel.border=element_rect(colour="black", fill=NA), text=element_text(family="Times New Roman", face="bold", size=12), panel.background=element_rect(fill="white"), panel.grid.major.x=element_blank(), panel.grid.major.y=element_line(size=.1, colour="black",linetype="dotted"), plot.title=element_text(hjust=0.5), axis.text.x=element_text(colour="black", angle=45, hjust=1))
plot2<- plot_grid(p1, p3, align = 'h')
title<- ggdraw() + draw_label("Slope Coefficients by Clinician and Vignette", fontface='bold', fontfamily='Times New Roman')
svg("Plot2.svg",width=10,height=4.00)
plot_grid(title, plot2, ncol=1, rel_heights=c(0.1,1))
dev.off()
定义一个新类。
注意:顺便说一下,这是原来的sweetalert,而不是Sweetalert2。
PS:下次如果你让我们知道究竟什么不起作用会有所帮助。