BootStrap笔记-popover的使用（popover中放验证码，点击更新）

Posted 2022-02-17 IT1995

做出来的效果是这样的。

当鼠标点击验证码的Input框时。

点击里面的img可以进行刷新

对应的代码如下：

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/cover.css" rel="stylesheet" />
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>

关键的js文件为：

popper.min.js和bootstrap.bundle.js和bootStrap.min.js和jquery-3.6.0.min.js

对应的input框为：

<form class="">
    <div class="form-floating mb-3">
	    <input type="text" class="form-control rounded-4 text-white bg-dark" id="userName" placeholder="[e-mail]" />
    	<label name="userName"  for="userName">用户名</label>
    </div>
    <div class="form-floating mb-3">
    	<input type="password" class="form-control rounded-4 text-white bg-dark" id="password" placeholder="password" />
    	<label name="password" for="password">密码</label>
    </div>
    <div class="form-floating mb-3">
    	<input type="password" class="form-control rounded-4 text-white bg-dark" data-bs-toggle="popover" title="点击刷新" data-html="true" data-bs-content='<img src="" />' id="captcha" placeholder="text" />
    	<label name="password" for="captcha" >验证码</label>
	</div>
     <button class="w-100 mb-2 btn btn-lg rounded-4 btn-outline-light" type="submit">登录</button>
</form>

在html结尾后填写js脚本：

<script>

    $(function()

        $("[data-bs-toggle='popover']").popover(
            html: true,
            placement: "left",
            content: "<img id='captchaImg' src='index.php?p=user&c=privilege&a=captcha' width='200' height='60px'>"
        );
    ).click(function ()


        $("#captchaImg").click(function ()

            $("#captchaImg").attr("src", "index.php?p=user&c=privilege&a=captcha&"+ Math.random());
        );
    );

</script>