morphy0186
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.
HTML is
Modal html is
$(".embed").on("contextmenu", function(e) {
e.preventDefault();
var targetModal = $(this).data('target');
$(targetModal).modal("show");
})
HTML is
<div class="embed" data-target="#embed0">
<img src="images/stakeholder-interest.png" alt="Analyse stakeholder interest"/>
</div>
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">× </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-->
ASKER
Thanks! Second modal is shown by
HTML
and modal is
HTML
<div class="embed" data-target="#embed1">
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-->
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">× </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">× </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">× </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>
Have you got a link we can look at?
Have you checked the console for errors.
Have you checked the console for errors.
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.
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?
ASKER
Sorry! here is the URL Stakeholder Analysis - multiple modals
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
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