在点击事件中在js函数中运行html

Question

我想以这种形式的示例的简单形式在此swal警报中添加表单

<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>

Answer 1

您的“列表”（包含html元素）变量应使用html而不是文本中显示的文本。 另外，您正在使用Bootstrap的输入类，所以我想如果您想实现这种形式，还可以添加bootstrap和font-awesome

您也可以查找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> 

希望这可以帮助！ :)

Answer 2

我想你的意思是你看不到你的html正确。 这是因为sweetalert具有一个名为.sweet-alert input的CSS类。 它具有display：none;属性，仅在更改swal类型时才会消失。 但是在您的情况下，只需使用display:block或inline-block定义一个新类。

注意：顺便说一下，这是针对原始的Sweetalert，而不是Sweetalert2。

PS：下次，如果您让我们知道确实不起作用的话，将会很有帮助。