CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Robert Glavaš
Robert Glavaš

Reputation: 67

Trigger a modal

I have problem with trigger a modal, i check for jquery and its ok.

I am using 1.12.4 version and i have tag in head of code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

My open modal tag is:

<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM"></a>

And my modal cocde is:

<div id="komentarM" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <input type="text" name="id" value=""></input>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

With this code i try trigger showing a modal:

<script> 
$(document).ready(function () {
    $('#komentarM').on('shown.bs.modal', function () {
    alert('da');
    });
});
</script>

Just for note, modal was show but trigger not work.

Upvotes: 0

Views: 223

Answers (3)

Ju Oliveira
Ju Oliveira

Reputation: 428

First: Input tags don't need to be closed, so I advise you to remove the close tag for input and leave it like this:

<input type="text" name="id" value="">

Second: The data-toggle and href attributes already link the anchor to open the modal, so you don't need the javascript function to do it, simply use your html code

See it working here

Upvotes: 0

Jhon Mher Gaco
Jhon Mher Gaco

Reputation: 1

I don't think there is wrong in your html code. As you can see below its properly working in Chrome/Firefox. I hope this might work for you

  <!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>

  <a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM">Modal Open</a>

  <div id="komentarM" class="modal">
      <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
      </div>
      <input type="text" name="id" value=""></input>
      <div class="modal-footer">
          <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
      </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function(){
      $('#komentarM').on('shown.bs.modal', function () {
        alert('da');
      });
    });
  </script>
  </body>
  </html>

Upvotes: 0

Ashton Wiersdorf
Ashton Wiersdorf

Reputation: 2000

With the code you've provided, I created this in a .html file:

<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"></script>
</head>
<body>
  <a data-toggle="modal" class="modal-trigger" data-id="11"
     href="#komentarM">Howdy</a>
</body>

<div id="komentarM" onload="funtiontest()" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <input type="text" name="id" value=""></input>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

<script>
$(document).ready(function () {
    $('#komentarM').on('shown.bs.modal', function () {
    alert('da');
    });
});
</script>

Note that I added Howdy inside the <a> tags meant to trigger the modal. That makes it so there is an area where the user can click. I clicked on the link, the alert appeared, followed by the modal. This works on Safari 10.0.3. Hopefully this helps.

Upvotes: 1

Related Questions