4

javascriptアラートをモーダルボックスに置き換える方法は?

javascript アラートは、一部のデータベースの結果に応じてエコーを介してトリガーされます

if response is a
{
     <script type="text/javascript">alert("response is a.");</script>
}
else
{
    <script type="text/javascript">alert("response is not a.");</script>
}

私はブートストラップを使用しています。アラートをブートストラップモーダルに置き換えることができれば完璧です

4

3 に答える 3

3

次の質問で見つけることができるコードに基づいて、自由に jsbin の例を作成してください: JavaScript: Alert() のオーバーライド

http://jsbin.com/UzUDOno/1/edit

特に、通常の JavaScript アラートのブロック プロパティを見逃すことになるため、アラートをオーバーライドすることは良い考えではないことに注意してください。私の例でわかるように、2 つのアラートを立て続けに使用すると、最後のアラートがその前のアラートを上書きします。

于 2013-09-11T10:00:05.127 に答える
0

@Kippieを補完するだけです。

http://jsbin.com/sadesukuli/2/edit?html,出力

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modal = $('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…&lt;/p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div>');
    modal.find(".modal-body").text(arguments[0]);
    modal.modal('show');
  };
})();


    alert('moo');
    alert('cow');
  </script>
</body>
</html>

「あなたの jsbin の例は、alert('moo') の呼び出しに続いて alert('cow') を示しています」

私の例は、「moo」と「cow」の両方を示しています。

于 2018-08-24T20:22:06.657 に答える
0

ブートストラップ 3.4.1 で動作するように @omar-fernando-pessoa の回答を更新しました

https://jsbin.com/monupudode/1/edit?html,出力

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modal = $('<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 id="myModalTitle" class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body&hellip;</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>');
    modal.find(".modal-body").text(arguments[0]);
    modal.modal('show');
  };
})();
    
    
    alert('moo');
    alert('cow');
  </script>
</body>
</html>

ブートストラップ 5.1.3 用に更新

https://jsbin.com/mimexomela/1/edit?html、出力

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modaldiv = $('<div id="myModal" class="modal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 id="myModalTitle" class="modal-title">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></div></div></div></div>');
    modaldiv.find(".modal-body").text(arguments[0]);
    modal = new bootstrap.Modal(modaldiv);
    modal.show();
  };
})();
    
    
    alert('moo');
    alert('cow');
  </script>
</body>
</html>
于 2022-01-12T17:29:20.273 に答える