php - data-toggle in javascript function

I have a button with the code:-

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

with A Modal.

Now I want to change the button like this

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

And I want data-toggle="modal" data-target="#exampleModal" to be executed in the function.

I tried

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

But it didn't work. Can anyone teach me how to do that?

I have a button with the code:-

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

with A Modal.

Now I want to change the button like this

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

And I want data-toggle="modal" data-target="#exampleModal" to be executed in the function.

I tried

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

But it didn't work. Can anyone teach me how to do that?

Share Improve this question edited Mar 15, 2019 at 5:39 fiza khan 1,29614 silver badges24 bronze badges asked Mar 15, 2019 at 1:59 Parikshith Shashidhar 211 gold badge1 silver badge4 bronze badges

java != javascript – prasanth Commented Mar 15, 2019 at 2:20

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

You can try this as your are using bootstrap.

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

Your HTML

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

You are using bootstrap so better use modal('toggle')

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

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

Working example

<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./jquery-3.3.1.slim.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script type="text/javascript" src="//stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">

  <style id="piled-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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

php - data-toggle in javascript function - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)