amphtml show amp-img in bootstrap modal - javascript

I want to load <amp-img> on bootstrap modal here is my code:
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<div class="exclusive-box">
<div class="exclusive-inner">
×</div>
</div>
</span>
</button>
<div class="modal-body">
<div class="modal-logo"><a href="">
<amp-img src="http://dummyimage.com/600x400/000/fff" alt="" width="600" height="400" layout=responsive ></amp-img>
</a></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$(window).load(function(){
$('#modal').modal('show');
});
</script>
But image is not displaying, same issue is persist when I try to implement it on bootstrap carousel or any other images which display on jQuery event

Can't have any user authored JavaScript code in AMP, only the JavaScript that is provided by the Google AMP team may exist on AMP pages as per AMP's specifications.

I think this is not supported in AMP.
"AMP is currently focused only on the websites of publications (e.g. newspapers, where the pages are relatively simple and not richly interactive), whereas Bootstrap is aimed at more general usage, including for sophisticated web apps."
Can't use any custom JS (so any of the Bootstrap components and JavaScript plugins are out); the only way around this would be to define anything that needs JS behavior as an extended component, loaded via syntax
You can only use a subset of HTML and specific tags like - as Bootstrap itself doesn't actually build the overall page/markup and it's left up to authors, there's not much Bootstrap would need to do here
You can only add custom styles as an inline - this is something that once again an author could/should be doing, not really something that Bootstrap should deal with
-from an "AMP'd HTML"

Related

modal is not working without data-toggle and data-target attributes

Im using bootstrap 4 js and I have the link below to open a modal:
<a id="show_login_modal" href="">Login</a>
And then the modal:
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
...
</div>
But I want to open the modal with default jquery so I have the code below:
$('#show_login_modal').click(function(){
$('#login_modal').modal('show');
})
$('#close_login_modal').click(function(){
$('#login_modal').modal('hide');
})
The issue is that like this when the login link is clicked it appears like a fade and then the fade disappears but the modal dont opens. Do you know why?
Kindly check if you have not included jquery twice. this probably happens due to that also.Also in some cases plugins create issues as well.
Make sure to put libraries in required order to get the result:
1- First bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(In other words, jquery.min.js must be called before bootstrap.min.js)
After ensuring the above kindly try the below snippet.
<a id="show_login_modal" href="javascript:void(0)">Login</a>
then write your jquery code.
what is happening is that the empty href is not allowing the popup to open up, just do javascript:void(0) followed by your code.
The only way I can reproduce your results is by leaving the href attribute present and set to href="". Removing it or setting a hash value (href="#") bypasses the problem and would be my recommended solution.
That, or transforming that element to a <button> to bypass hyperlink default behavior entirely.
$('#button_modal, #link_modal').click(function(){
$('#login_modal').modal('show')
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<button id="button_modal">Login</button> or <a id="link_modal">Login</a>
<div id="login_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Modal header</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I would also note that while you're activating your Modal via JavaScript, it's not necessary to rely on JavaScript to also CLOSE your modal. The data-dismiss attribute baked into the Modal structure will function regardless of how the modal was initialized.

thymeleaf fragments - html modal for confirmation dialog

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}"/>

Add page to certain div in bootstrap modal windows

I am working on a project that use bootstrap, in it I need to show modal windows that contain other html page I use the following code
<a class="menuItemManageContent"
href="<%= request.getContextPath()%>/news/index/NEWS/0943ac5b-e556-49eb-acef-a112a56e3e7b/managePortlet.html"
data-toggle="modal" data-target="#modal-table_<%= request.getParameter("instanceId").toString() %>">Manage content</a>
<div id="modal-table_<%= request.getParameter("instanceId").toString() %>" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="white">×</span>
</button>
mange
</div>
</div>
<div id="contentBody" class="modal-body no-padding">
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
the code above work fine , it is showing the modal with my page in it the only part I need to put my content in contentBody so I still have the header for the modal as I design it, my question here is there is an easy way to do that with no javascript, can I tell the data-target to put the page in the contentBody div instead of the default modal content which is override my div.
fine, i got it work I just move the header out of the content and that solve the issue, I will leave this question hopefully it help someone else

Display Bootstrap Modal using javascript onClick

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/

Twitter Bootstrap Modal does not appear

Any modal that I am creating using twitter bootstrap fails to appear. I'm not sure what I'm doing wrong seeing that I set up a test modal using the code that bootstrap provides and it still doesn't work.
Here is my code (body only):
You need to link to bootstrap.js, bootstrap-modal.js, jquery.js, and bootstrap.css
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
Modal body would go here...
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a data-toggle="modal" href="#myModal">Show Modal</a>
</body>
And here are links to the bootstrap package and jquery that a bootstrap modal needs:
bootstrap package
jquery
My problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked.
You have to call:
<script>
$('#myModal').modal('show')
</script>
After the </body> tag. Or if you only want to call it when the user clicks on something:
$('#button_id').click(function(){
$('#myModal').modal('show')
});

Categories

Resources