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>
Related
I installed bootstrap with npm and I took the code form bootstrap and paste it on my code but it doesn't work. I'm an hour further but I am not getting it.
this is the code
<template>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
If I click on the button it neither gives an error and nor a popup. Where am I doing wrong?
This is the link of the bootstrap code I copy it. Is the Live demo
I guess that just installing bootstrap is not enough, because you are not using vue-bootstrap, you have to configure the jquery file in order to make it work, here it's a post that explain it step by step
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.
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/
How can I use modal to edit the specific data. For example, when I click the button beside the data, it will get the id of it and a modal will appear with all of the information of that specific data?
Below is an example of modal that i will use but only plain modal without php codes.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" 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>
</div>
</div>
You better use ajax for this case
The steps for your need are:
1. sent the parameter id with ajax data.
2. select data with the query an return with JSON in file that you mention in ajax url.
3. The last, showing modal with the JSON data that you have made.
This is basic about ajax http://www.w3schools.com/jquery/ajax_ajax.asp
Okay so my problem is that when I do the following:
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
That prints the playerdetails.php echo but for some reason it removes my bootstrap controls. Can someone tell me why it's doing it and how to fix it? I've already tried getting the default bootstrap modal template and still it shows the playerdetails.php echoes but it removes all my controls for the modal.
Controls I'm looking for is these:
For these controls to function you need to provide the markup for them, bootstrap doesn't add them to modals automatically. If you can modify the output of playerdetails.php, simply add the markup there...e.g.
<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">Modal title</h4>
</div>
However Bootstrap has deprecated the remote option since v3.3.0 and removed it alltogether in Bootstrap 4. Instead they recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself
If you call jQuery.load yourself you can do something like this:
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<!-- load contents here -->
</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>
</div>
</div>
define your button
<button class="btn btn-lg btn-primary btn-open-dialog">Launch Demo Modal</button>
and bind a jQuery click event to it to load your player
$('.btn-open-dialog').on('click', function(){
$('#myModal .modal-body').load('playerdetails.php?player=99VY9JR8', function(){
/* load finished, show dialog */
$('#myModal').modal('show')
});
});