I am trying to trigger the modal popup manually via Javascript $("#myModal").modal() as you can see I inserted it inside this function that analyzes the correct answers and displays a short message yet it did not work.
Here's my code:
function showFinalResults() {
$("#myModal").modal()
content.innerHTML = "<h3>WELL DONE!</h3>" +
"<p>You're amazing for taking this quiz. Not many people challenge themselves every now and then. It's always good to stay confident with any challenges that may come your way.</p>" +
"<h3>" + score + " out of " + quiz.length + " questions, " +
Math.round(score / quiz.length * 100) + "%<h3>";
}
Here's the html for the modal:
<div class="container">
<h2>Basic Modal Example</h2>
<!-- 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 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>
</div>
Modal scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is a working code snippet: http://codepen.io/steveharrison/pen/ONgWdL
Your HTML looks correct and $('#myModal').modal() is the correct way to trigger the modal. Try using the following JS and see if it works (edit: forgot to mention this assumes you have a button element with class open-modal, like in above CodePen).
$(document).on('ready', function() {
$('.open-modal').click(function() {
$('#myModal').modal();
});
});
My guess is that there's an error when you're trying to set the content of the modal... check your console and see if there are any errors.
Update
It was not working due to the fact there was a $ function manually defined which was conflicting with jQuery's $ fn... and both behaved quite differently (and hence setting, say, .innerHTML on such elements like content not working as expected). I replaced this $ fn with regular jQuery selectors, added in the modal HTML he included above, and it's now working (incomplete, but the modal is functional): https://jsfiddle.net/th8dvbo2/3/
To trigger modal for show hide you can use something like this
$('#myModal').modal('hide');
and
$('#myModal').modal('show');
so instead of
$("#myModal").modal();
you can use the above code
Related
I am trying to build a web page that contains populates a bootstrap modal from an Html file stored on the same pc. However, it is currently displaying weirdly as can be seen in this image
This is my first time posting here and I am self-taught so if this is a stupid mistake - sorry.
I am trying to build a page with a list of stories. I want the stories to open my in a modal. To stop the page itself getting ridiculously long the stories themselves are stored in their own Html files (including formatting) and inserted using javascript - inner HTML.
The webpage includes bootstrap 4 and jquery
the relevant code is
<button onclick="fetchStory('Solitude')"> Read </button>
<div class="modal" id="displayStory" tabindex="-1" role="dialog" aria-labelledby="fetchStoryLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fetchStoryLabel">New message</h5>
</div>
<div class="modal-body" id="sample">
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
<script type="text/javascript">
function fetchStory(story) {
var modal = $(displayStory)
modal.find('.modal-title').text(story)
var story_path = "samples\\" + story + ".html"
document.getElementById("sample").innerHTML='<object type="text/html" data=' + story_path + '></object>'
$('#displayStory').modal()
}
</script>
If I passed the Html directly into the modal it displays as expected but when inserted using javascript it displays as above. inspecting it on a web page I cannot see any reason for the difference
In my Laravel project , I use AdminLTE and I want to use modals in it.
all part of AdminLTE works great. but, I can't use modals. I don't know how to use it. should I add any js code for it?
scripts:
<script src="{{asset('bower_components/jquery/jquery.js')}}"></script>
<script src="{{asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<script src="{{asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>
<script src="{{asset('bower_components/datatables.net/js/jquery.dataTables.js')}}"></script>
<script src="{{asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.full.js')}}"></script>
I want to have some thing like this : https://adminlte.io/themes/AdminLTE/pages/UI/modals.html
Its not Related to Laravel As long as it concerns The modals and Design
so now you have To Check your console For any Error And see If there is any error on console for that modal and if not you have to check any kind of js for modal or bootstrap for modal and in the end you can check from this link for cdn usage of modal plugin for bootstrap :
https://cdnjs.com/libraries/bootstrap-modal
and if not finally check the atrribute of modal and bottuns :
<!-- 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>
this is an example paste this code and check if its working on your project .
I had mistake in css loading and also I didn't add modal's js file :
<script src="{{asset('bower_components/bootstrap/js/modal.js')}}"></script>
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" 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">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
I'm implementing a Bootstrap HTML application that using Modal as confirm dialog, and it could be a modal inside another one. For example I open modal, then I click something on that modal, the first one will be hidden, and open another modal.
From Bootstrap 3.3.6, they are supporting to add a margin-right automatically, and hide the vertical scroll bar, however once the second modal is opened, the scroll bar is not disappeared, and if I close and open again these modals several times, the margin-right will be increased from 17px to 17x2px, and 17x3px ...
I don't know how to solve that problem with Bootstrap modal, or any workaround, I'm also thinking about Angular that keep only 1 modal, and change the modal content (including header, body, and footer), and each modal will be introduced in a separated HTML template, and angular will load a particular template for each modal, but I'm not have much experience with these workaround with Angular.
Here is the sample page that I created for my problem, the page had long content, with Open Modal button, click to open first modal, then click on Open Second Modal to dismiss the first one and open the second one. If you do that several time, you can see that the margin right is increased, and a white line at the right.
http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview
You have written data-dismiss and data-target on one click itself, which is not wrong but internally bootstrap modal has an animate function which takes its own time (appx 500ms). So it would be better if you control it through jqyery.
see below code.
$("#secondModal").click(function(){
$("#firstModal").modal('hide');
setTimeout(function(){
$("#secondModal").modal("show");
},500)
});
The modal method is already integrated within the bootstrap.js which you use.
So it will not show your margin which occurs at runtime.
You can easily handle using stylesheet according bootstrap modal display once into another bootstrap modal.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" id="myBtn">Click here</button>
<div class="modal fade modal-admin" 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">
<button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id="myModal1" 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" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#close").click(function(){
$('.modal-admin').css('width', '500px');
});
});
$(document).ready(function(){
$("#modelbtn").click(function(){
$('.modal-admin').css('width', '200px');
$("#myModal1").modal();
$('#myModal1').css('margin-left', '200px');
});
});
</script>
</html>
I need to be able to open a Twitter bootstrap modal window using the onClick="" or similar function. Just need the code to go into the onClick="". I am trying to make a click-able div to open the modal.
Code Excerpts:
Div Code:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
</div>
</div>
If you're using Bootstrap 2, you'd follow the markup here:
http://getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. T145's answer helped a lot, so I wanted to share how I used it.
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here:
http://getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. It should be something like this, where "myModal" = ID of element:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works.
It is also not very wise to have an onClick bound to a div element; something like a button would be more suitable.
Hope this helps!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc.
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/