asked on

Bootstrap modal sometimes showing and other times not showing

I have several Modals on the same page, but they are only showing intermittently. The Models are trigged by this script.

$(".embed").on("contextmenu", function(e) {
    e.preventDefault();
    var targetModal = $(this).data('target');
    $(targetModal).modal("show");
})

Open in new window

HTML is

<div class="embed" data-target="#embed0">
    <img src="images/stakeholder-interest.png"  alt="Analyse stakeholder interest"/> 
</div>

Open in new window

Modal html is

<div id="embed0" class="modal" role="dialog">
    <div class="modal-dialog">
    <!-- modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;  </button>
            </div><!--END model-header-->
            <div class="modal-body">        
            </div><!--END model-body-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-  dismiss="modal">Close</button>
            </div>
        </div><!-- end modal-content-->
    </div><!-- end modal-dialog-->
</div><!-- END embed0 1st image-->

Open in new window

Moussa Mokhtari

@morphy0186
your code looks fine for one model
when they show when they don't ,does it have a pattern ?
or provide the full code for

morphy0186

ASKER

Thanks! Second modal is shown by

HTML

<div class="embed" data-target="#embed1">

Open in new window

and modal is

 <!--embed1 2nd image-->
  <div id="embed1" class="modal" role="dialog">
    <div class="modal-dialog">
        <!-- modal content-->
         <div class="modal-content">
              <div class="modal-header">
        </div><!--END model-header-->
                 <div class="modal-body">        
             </div><!--END model-body-->
                <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div><!-- end modal-content-->
    </div><!-- end modal-dialog-->
</div><!-- END embed1 2nd image-->

Open in new window

Moussa Mokhtari

It's working with me fine here is my code just save it to html file and run it

<!DOCTYPE html>
<html>
<head>
	<title>boom</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	
</head>
<body>

<div class="embed" data-target="#embed0">
    <img src="http://simpleicon.com/wp-content/uploads/gear-2.svg" width="100px" alt="Analyse stakeholder interest"/> 
</div>

<div id="embed0" class="modal" role="dialog">
    <div class="modal-dialog">
    <!-- modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;  </button>
            </div><!--END model-header-->
            <div class="modal-body">
            Hi I'm here dude,embed0        
            </div><!--END model-body-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- end modal-content-->
    </div><!-- end modal-dialog-->
</div><!-- END embed0 1st image-->
<div class="embed" data-target="#embed1">
    <img src="http://simpleicon.com/wp-content/uploads/gear-2.svg" width="100px" alt="Analyse stakeholder interest"/> 
</div>

<div id="embed1" class="modal" role="dialog">
    <div class="modal-dialog">
    <!-- modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;  </button>
            </div><!--END model-header-->
            <div class="modal-body">
            Hi I'm here dude,embed1        
            </div><!--END model-body-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- end modal-content-->
    </div><!-- end modal-dialog-->
</div><!-- END embed0 1st image-->
<div class="embed" data-target="#embed2">
    <img src="http://simpleicon.com/wp-content/uploads/gear-2.svg" width="100px"  alt="Analyse stakeholder interest"/> 
</div>

<div id="embed2" class="modal" role="dialog">
    <div class="modal-dialog">
    <!-- modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;  </button>
            </div><!--END model-header-->
            <div class="modal-body">
            Hi I'm here dude,embed2         
            </div><!--END model-body-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- end modal-content-->
    </div><!-- end modal-dialog-->
</div><!-- END embed0 1st image-->
<script type="text/javascript">
		$(".embed").on("contextmenu", function(e) {
    e.preventDefault();
    var targetModal = $(this).data('target');
    $(targetModal).modal("show");
})
	</script>
</body>
</html>

Open in new window

Julian Hansen

Have you got a link we can look at?
Have you checked the console for errors.

morphy0186

ASKER

Thanks Julian and Moussa. I think it is an on page problem perhaps another script is causing problems the page is . Click on any image in the body of the article (beneath the heading <h1>Stakeholder Analysis</h1>) you should see that sometimes the modal pops up on image click and sometimes it doesn't.

Julian Hansen

Click on any image in the body of the article (beneath the heading <h1>Stakeholder Analysis</h1>) you should see that sometimes the modal pops up on image click and sometimes it doesn't.

Are you referring to a link you didn't post?

Where can we click on an image?

morphy0186

ASKER

Sorry! here is the URL Stakeholder Analysis - multiple modals

ASKER CERTIFIED SOLUTION

morphy0186

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I have recommended this question be closed as follows:

Accept: morphy0186 (https:#a41847289)

If you feel this question should be closed differently, post an objection and the moderators will review all objections and close it as they feel fit. If no one objects, this question will be closed automatically the way described above.

mplungjan
Experts-Exchange Cleanup Volunteer