0

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.

Improve this question
0

3 Answers 3

Reset to default
1

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.

Improve this answer
1
  • 1
    Thanks dude :D i am add <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> and its works now!
    – Robert Glavaš
    Commented Mar 26, 2017 at 11:12
0

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>
Improve this answer
0

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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.