Question

我正在实现一个自举弹出窗口。我在数据目标中使用特殊字符赋予了一些价值。这些值来自DB，此弹出窗口通过循环实现。

我尝试过w3school。如何打开带有特殊字符的弹出窗口。

<!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/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my(Modal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="my(Modal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

如果删除(，它将起作用。但是这些ID不是我的手，这些ID来自API。

Answer 1

您需要在选择器中“转义”特殊字符。这个：

data-target="#my(Modal"

应该是：

data-target="#my\(Modal"

或者：

data-target="#my\000028Modal"

您的示例代码中仅添加了一个\：

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my\(Modal">Open Modal</button>
  <!-- Modal -->
  <div class="modal fade" id="my(Modal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您必须转义特殊字符，以使jQuery知道您想按原样使用该字符，并且不应将其视为语法错误。

function escapeString(str) {
    return (str + '').replace(/[\\"')(]/g, '\\$&').replace(/\u0000/g, '\\0')
}
// Add special characters here       ^ -- after \\
// This allows single, and double quotes, 
// opening, and closing parentheses.

使用以上函数包装目标值：

data-target="+ escapeString(targetValue) +"

Answer 3

<div ng-repeat="rule in ruleDetails">
  <div>{{rule.name}} <i data-toggle="modal" data-target="#{{ rule.name }}"></i>
  </div>
  <div class="modal fade" id="{{ rule.name }}" tabindex="-1" role="dialog"></div> 
</div>

I have special characters in rule.name for example: 'as-copy(1) from test data' 
which is bounded with id attribute of bootstrap modal. By this UI modal or popup 
is not opening and displayed rule name. Please help how to trim or escape 
special characters here?

如何使用特殊字符处理数据目标值？

3 个答案: