个人中心
gpt4 book ai didi

javascript - 条件为真时打开引导模式

转载 作者：行者123 更新时间：2023-11-29 22:45:44 25 4
gpt4 key购买 nike

用户需要输入比特币地址比特币地址有效后模式应该打开如果比特币地址无效，模式应该保持关闭

在此输入图片描述 enter image description here enter image description here

这是代码(Bicoin 验证有效，我只需要模式方面的帮助)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>BItmixxer</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style media="screen">
  hr.style1{
	border-top: 1px solid #8c8b8b;
}

</style>
  </head>
  <body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron jumbotron-fluid" style="text-align:center" >
  <div class="container">
    <h1>Crypto Mixxer</h1>
    <p>some more Text about crypto mixxer</p>
  </div>
</div>

<div class="container" style="text-align:center" >
  <h1>BTC Mixxer</h1>
  <p>Choose COins to mix:</p>  <button type="button" class="btn btn-outline-primary">Bitcoin</button>
  <button type="button" class="btn btn-outline-success">Ethereum</button>
  <br>
  <br>
  <br>
  <div class="form-group" id="elMessage" class="msg">
  <input type="text" class="form-control" id="inpAddress" value="">
</div>
<button type="button" class="btn btn-primary" id="btnValidate" data-toggle="modal" data-target="#myModal">Next</button>


<script>
  var normalize = (s) => {
  let x = String(s) || '';
  return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};

var check = (s) => {

  if (s.length < 26 || s.length > 35) {
    return false;
  }

  let re = /^[A-Z0-9]+$/i;
  if (!re.test(s)) {
    return false;
  }

  return true;
};


var getEl = (id) => {
  return document.getElementById(id) || null;
};

var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');

var setMessage = (txt = '', clss = 'msg') => {
  elMessage.className = clss;
  elMessage.innerHTML = txt;
};


var validate = (s) => {

  let className = 'msg fail';
  let textMessage = 'Invalid bitcoin address';

  if (!s) {
    textMessage = 'Please enter a valid address';

  }

  let re = check(s);
  if (re) {
    className = 'msg pass';
    textMessage = 'Bitcoin address is valid';
  }

  setMessage(textMessage, className);

  return re;
};

btnValidate.onclick = () => {
  let v = normalize(inpAddress.value);
  let result = validate(v);
  if (result) {
    inpAddress.value = v;

  }

};

lnkClear.onclick = () => {
  inpAddress.value = '';
  inpAddress.focus();
  setMessage('Enter any text and press "Validate"');
};


</script>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <h3>Please send your BTC(min0.5) to</h3>
        <p id ="btc-house" style="color:blue;"></p>

  <script>
    var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V','1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];

    var rand = myArray[Math.floor(Math.random() * myArray.length)];

    document.getElementById("btc-house").innerHTML = rand;

  </script>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>




  </body>
</html>

我知道我需要使用

$('#myModal').modal('show');
$('#myModal').modal('hide');

不知道放在哪里

最佳答案

首先从 #btnValidate 中移除 data-toggle="modal"target="#myModal"

<button type="button" class="btn btn-primary" id="btnValidate">Next</button>

然后将 validate 函数中的 if 语句更改为:

if (re) {
    className = 'msg pass';
    textMessage = 'Bitcoin address is valid';
    $('#myModal').modal('show')
}

请注意，您两次导入 jquery，这可能会导致错误。删除一个导入并确保在 bootsrap.js 之前导入 jquery

关于javascript - 条件为真时打开引导模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58722217/

25 4 0
文章推荐： javascript - 类型为 void 的函数不能分配给类型 Observable
文章推荐： MySQL:选择任何给定类别的产品
文章推荐： c# - 如何使用 Linq 在 ASP.NET 中运行 mysql Sp
文章推荐： javascript - 将整数数组解码为 PNG(JavaScript、node.js)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com