在click事件中运行js函数内的html

时间:2017-05-31 09:00:59

标签: javascript jquery html sweetalert

我想在此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>

2 个答案:

答案 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:下次如果你让我们知道究竟什么不起作用会有所帮助。