「IF-STATEMENT」で成功した後、モーダルダイアログを表示する

debugcn 投稿 Dev

J.サンチェス

「if」ステートメントの結果の後にモーダルダイアログを表示しようとしていますが、それを開くことができるボタンはありませんが、条件ステートメントの応答のみを使用して表示する方法はありますか？

現在、Model ViewControllerで開発しています。だから私が電話をかけるとき、私はコントローラーでこのようなことをします：

if($response == "success"){
  <script>
    $(function() {
      $('#eventCreated').modal('show');
    });
  </script>
}

ビューの下部にあるモーダルは次のようになります。

<div class="modal fade" id="eventCreated" tabindex="-1" role="dialog" aria- 
     labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
       <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Great!</h4>
      </div>
      <div class="modal-body">
        This is test 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data- 
         dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">create</button>
      </div>
    </div> 
  </div>
</div>

アイシュワリヤー

結局のところ、これは応答に依存するので、これがあなたに役立つことを願っています。応答変数を使用してデモのみを表示します

var response = "success";
if (response == "success") {

  $('#eventCreated').modal('show');

}
$("button").click(function(){
var response = "success";
if (response == "success") {

  $('#eventCreated').modal('show');

}
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="eventCreated">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
         <h4 class="modal-title" id="myModalLabel">Great!</h4>
      </div>
      <div class="modal-body">
        This is test 
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">create</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]