Question

我有一个带有代码的按钮：-

<button type="button" name="btn-success" data-toggle="modal" data-target="#exampleModal" class="btn-success">Process</button>

带模态。

现在我要更改按钮

<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>

我想要data-toggle="modal" data-target="#exampleModal" 在函数中执行。

我尝试过

<script>
    function myFunction(){
        data-toggle="modal" data-target="#exampleModal";
    };
</script>

但是没有用。谁能教我该怎么做？

Answer 1

您可以在使用引导程序时尝试使用它。

<script>
 function myFunction(){ 
$("#exampleModal").modal('toggle'); //see here usage
};
</script>

您的HTML

  <button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>

Answer 2

您正在使用引导程序，因此最好使用modal('toggle')

function myFunction(){
 $("#exampleModal").modal('toggle')
}

<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>

工作示例

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="/js/lib/dummy.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <style id="compiled-css" type="text/css">
    .row {
      background: #f8f9fa;
      margin-top: 20px;
    }
    
    .col {
      border: solid 1px #6c757d;
      padding: 10px;
    }
  </style>


  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">
     function myFunction() {
         $("#exampleModal").modal('show')
      }
  </script>

</head>

<body>
  <button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
  <div id="exampleModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</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>


  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent) {
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>


</body>

</html>

javascript函数中的数据切换

2 个答案: