Bootstrap modal faded using javascript only (solved)

help
1

hi guys,

this must be something very simple…

If I use a bootstrap modal, using HTML only it works fine. If I click my menu item I get a faded modal.

image
image837×461 16.5 KB 

<template name="slideSelectionSheet">
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog" style="width: 90%;">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Select the content to be presented</h4>
                </div>
                <div class="modal-body">
                    <iframe src='{{IFrameURLChapterSelection}}' class="selector" style="width: 100%; height: calc(100vh - 250px); border: none;">
                    </iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
</template>

html

          <a class="item selectSlides" href="#" data-toggle="modal" data-target="#myModal"><i class="inverted search link icon"></i> SELECT YOUR CONTENT</a>

this is the most simple modal example you can find on the internet, and it works!

Now… I want to show the modal in my onRendered of the template… but now I get a faded modal… I am lost! :slight_smile:

$("#myModal").modal();
gives

image
image1199×663 24 KB

2

Funny… its a bug in bootstrap somehow… if I change my HTML the problem is solved

<div id="myModal" class="modal fade" role="dialog">

to

<div id="myModal" class="modal" role="dialog">
3

Hi , please check this website to complete details of bootstrap modal
https://bootstrapmodal.com