根据条件弹出模态显示

时间：2018-03-28 06:10:10

标签： javascript jquery

如果文本中没有输入，我想显示弹出模式，如果根据条件有任何输入文本，我还要显示弹出模式。

我使用了两种模态，但它不起作用。我已经使用IF条件根据条件显示不同的模态，但我得到的标题为“模态标题”的模态框。 

public void ReadFiles()
{
  List<string> paths = new List<string>(){"path1", "path2", "path3"};
  foreach(string path in Paths)
  {
      await ProcessRead(path);
  }
}

public async void ProcessRead(filePath)
{
    if (File.Exists(filePath) == false)
    {
        Debug.WriteLine("file not found: " + filePath);
    }
    else
    {
        try
        {
            string text = await ReadTextAsync(filePath);
            Debug.WriteLine(text);
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
        }
    }
}

private async Task<string> ReadTextAsync(string filePath)
{
    using (FileStream sourceStream = new FileStream(filePath,
        FileMode.Open, FileAccess.Read, FileShare.Read,
        bufferSize: 4096, useAsync: true))
    {
        StringBuilder sb = new StringBuilder();

        byte[] buffer = new byte[0x1000];
        int numRead;
        while ((numRead = await sourceStream.ReadAsync(buffer, 0, buffer.Length)) != 0)
        {
            string text = Encoding.Unicode.GetString(buffer, 0, numRead);
            sb.Append(text);
        }

        return sb.ToString();
    }
}

3 个答案:

答案 0 :(得分：2)

如果您真的想要使用变量而不是需要定义内部点击功能，则无需使用需要使用$('#test').val() == "" || $('#test').val() == null来检查条件的变量..对于您的场景..工作演示如下 - ：）

＆＃13;
＆＃13; 
$('#go').click(function() {
  if ($('#test').val() == "" || $('#test').val() == null ) {
    $('#\\#myModal').modal('show');
  }
  else{
    $('#\\#myModal1').modal('show');
  }

});
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">Test</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-6 col-sm-3">
    <button type="button" id="go" class="btn btn-primary">Go</button>
  </div>
</div>

<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <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 class="modal-title">Modal title with blank text box value</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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
  <div class="modal-dialog">
    <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 class="modal-title">HI</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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<!--End Modal-->
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您正在尝试在脚本加载var test1 = $('#test').val();时获取值。因此，当脚本加载时，test1的值将为空，因此只有一个poup可以工作。将此语句置于条件var test1 = $('#test').val();

中 
    <script type="text/javascript">
        $('#go').click(function () {
            var test1 = $('#test').val();
            if (test1 === "") {
                $('#\\#myModal').modal('show');
            } else {
                $('#\\#myModal1').modal('show');
            }

        });
    </script>

您可以在下面的演示中查看以便更好地理解。

＆＃13;
＆＃13; 
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

        </head>
        <body>
            <div class="form-group">
                <label for="test" class="col-sm-3 control-label">Test</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-6 col-sm-3">
                    <button type="button" id="go" class="btn btn-primary">Go</button>
                </div>
            </div>

            <!--Modal if input is empty-->
            <div class="modal fade" id="#myModal">
                <div class="modal-dialog">
                    <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 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>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

            <!--modal if there is some text--->
            <!--Modal-->
            <div class="modal fade" id="#myModal1">
                <div class="modal-dialog">
                    <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 class="modal-title">HI</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>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <script type="text/javascript">
                $('#go').click(function () {
                    var test1 = $('#test').val();
                    if (test1 === "") {
                        $('#\\#myModal').modal('show');
                    } else {
                        $('#\\#myModal1').modal('show');
                    }

                });
            </script>
            <!-- /.modal -->
            <!--End Modal-->
        </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

你不必在为div提供id时添加＃，你可以用#word调用它。你必须在按钮上触发click事件时再次获取输入值。你可以在JSFiddle上查看工作代码Your updated Code snippet

HTML CODE：

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">Test</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-6 col-sm-3">
    <button type="button" id="go" class="btn btn-primary">Go</button>
  </div>
</div>

<!--Modal if input is empty-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <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 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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="myModal1">
  <div class="modal-dialog">
    <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 class="modal-title">HI</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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<!--End Modal-->
</body>
</html>

JS代码：

$('#go').click(function() {
var test1 = $.trim($('#test').val());
  if (test1.length==0) {
    $('#myModal').modal('show');
  }
  else{
    $('#myModal1').modal('show');
  }

});
相关问题
最新问题