data-toggle in javascript function

javascript php jquery bootstrap-modal

10,435

Solution 1

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>

Solution 2

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.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>

10,435

Author by

Parikshith Shashidhar

Updated on June 05, 2022

Comments

Parikshith Shashidhar about 2 years

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?

prasanth over 5 years

java != javascript

Parikshith Shashidhar over 5 years

When I use data-toggle in button, the container toggles. But when I did it in the function as you said, the container didn't toggle. What can I do