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

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

在此输入图片描述 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/

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

上一篇：javascript - 将整数数组解码为 PNG(JavaScript、node.js)

下一篇：javascript - 类型为 void 的函数不能分配给类型 Observable<any>