I am looking to trigger a modal that I have created when some piece of text is selected in the browser. I have handled the text selection part, but cannot trigger the modal. I tried to do the following:
Here is my modal:
<div class="modal fade" id="eliaModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select an Option</h4>
</div>
<div class="modal-body">
<p1 class="labelHeadingClass" id="selectedHeadP"></p1>
<p1 class="labelTextClass" id="selectedTextP"></p1>
<br/>
<p1 class="labelHeadingClass" id="translatedHeadP"></p1>
<p1 class="labelTextClass" id="translatedTextP"></p1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="translateP" >Translate</button>
<button type="button" class="btn btn-default" id="extractText" >Extract Text</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And here is how I call it in my background.js file where the message is handled:
$("#eliaModal").modal("show");
Nothing happens. I made sure that this code is executed and localized the problem to here. My idea here is that the background.js file tries to find this modal in the webpage which the user is viewing, whereas the modal is on a separate HTML file. I feel like I have to inject this to the webpage that the user is viewing, but I couldn't get a proper way to do that and I am not even sure if that is the right way. I would appreciate if someone can point me the right direction.
Related
I want to make a website (done). Then I´m adding at least 30 buttons, and when you press the first button, a simple modal comes up with the ability to close, but when you press the second button, the same thing happens! It's just another content.
Let me try to tell you this in my bad programming language.
<div class="button" id="modal1">1</div>
if pressed = "modal1" opens.
<div class="button" id="modal2">2</div>
îf pressed = "modal2" opens with different content.
I would add some code, but I haven´t got any longer than the Bootstrap: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
just check this link http://www.w3schools.com/bootstrap/bootstrap_modal.asp it explain how modal works. You must have data-toggle="modal" data-target="#myModal" in item you click to open modal and you need mention "#myModal" as id of the target modal, use different id to open different modal.
Using the sample you linked, I copied and pasted the first model div to a second and made minor changes so you can see the difference when clicking on the buttons.
I then copied and pasted the button, and changed the data-target attribute in the second button to match the div I added.
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<!-- data-target in the first button matches the id of the first div below -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- the second button data-target matches the id of thj e second div below -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- this is copied from the first div, given its own id -->
<div class="modal fade" id="myModal2" 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>
<h4 class="modal-title">Modal Header 2</h4>
</div>
<div class="modal-body">
<p>Some text in the modal. model 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
You can see my three modals, like i said you just need to change data-target="#myModal1" and id="myModal1"
`https://jsfiddle.net/milanpanin/b2pyb6Lq/
If you use Bootstrap modal u need just to change data-target and crate modals for all buttons.
Ok, so I attempted to implement a modal to my website but to my dismay, I've run into a problem where the firstly the modal is faded out and secondly, the text doesn't display nor am I able to click away.
The modal on my website
<button type="button" class="btn btn-blue btn-effect" data-toggle="modal" data-target="#myModal">HORRAY!</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
Close
edit: I'm very new to Javascript, I only start coding again after a 5 year hiatus
edit: after trying fiddle, i've come to a guess that it's an issue in my css
If your code is like this one, I believe the problem is in the space between data-dismiss. Despite that your code works just fine
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
http://jsfiddle.net/3kgbG/1637/
Im new in web application and i came across the modal feature in bootstrap, i did researched and came across some examples that works perfectly fine but when i tried to copy what they did, an underlying image or panel or i dont know displays behind the modal... how to remove this? ive been trapped in this thing for like 3 days.. haha.. thanks...
Here is the image:-
and the code from w3schools... this should work but i dont know why..
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As I checked your code of modal, This is coming fine.
check here
The problem is in your html kindly show us the entire html so that we can debug your code.
hi your code is working just fine. i find no problem with it.
output of the code
hopefully problem with the browser?
I have a JavaScript with alert box saying some text when an image is uploaded with wrong dimension.I want to show that alert as a Bootstrap alert instead of a popup window?
I have a separate JavaScript file.
In Bootstrap they're not called "pop ups", but instead modals. Its the same general principle (a alert onto the screen for the user to interact with), but just more pretty. See the link below for more information on modals, and the code as well (fully functional). Hope this helps. - Jusitn
Link: http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Edit: Dont forget to add the bootstrap CDN's for it to work (both the CSS and Javascript CDNs) between your head tags
CDN can be found here: http://www.bootstrapcdn.com/
Code:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I stumbled across a similar question to mine, but not exactly what I want (Fancy box, grab from url). I want to do the same thing but with bootstrap modals. I did find some tutorials on this by adding data-remote and it does not work. Also it is not exactly what I want to do. What I want is just simply a modal. Not any of the code for the header, main part or the footer. All of that will be included in the external page (the page is still actually located on the server). So basically a link like this faq will be included and it will open a bare modal
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
//ajax loads the external page stuff into here.
</div>
Then on the external page (that is on the same server) would contain something like this:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
I hope this is possible. Thanks for the help!
I figured it out. On the main page, put
<a href="" data-toggle="modal" data-target=".modal" data-remote="URL_HERE">TEST/a>
as well as this:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
</div>
Then simply put something like this on the remote site.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
Go! »
</div>
</div>
</div>