Develop Reference

Bootstrap alert : how to just 'hide' them without removing them when closing?

I'm using bootstrap 4 Alerts to display error messages, etc. such as their demo:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
I'm also using AJAX calls to do form POSTs.
Problem I'm having is that if a user posts, the error message will show up, but if user clicks on the close button and re-posts, if an error happens, because he previously closed the previous error, I cannot unhide the alert container with a d-block because it simply no longer exists in the DOM / Page. The DIV element was destroyed, or at least, I cannot see it in the Chrome's developer tools.
How could I fixe this so that my close button simply 'hides' the container, instead of destroying it or whatever it does? I need to be able to re-show it even after user closed.
Cheers! Pat

Ended up replacing data-dismiss="alert" with an onClick="$('#idOfDiv').addClass('d-none');" type of solution...
Cheers for your help! Pat

Did you try using a bit of jQuery or Javascript ?
Maybe adding some "arrow" icon on the top corner.
Then, dividing your alert into two sections : one is a thin strip that remains permanently and the other one which is "toggling" when clicked

stop/pause video when modal closes/hides

I know this has been asked and answered, but I'm not having any luck with any of the options that I've found. I'm trying to have the video stop playback or pause the video when the modal closes. One problem I'm having is the ability to target the close button. I've put console.logs in the functions I've tried and they weren't registering in the console at all. Thanks for any insights able to be offered.
<div id="myModal<%= index + 1 %>" data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content bmd-modalContent" >
<div class="modal-body modal-header">
<div class="close-button">
<button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">×</span></button>
</div>
<div class='embed-responsive embed-responsive-16by9'>
<iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
EDIT:
Sorry, I'had tried so much jQuery that I didn't have any in my app.js folder at the time. Here is what I'm working with now.
$('[id^=myModal]').on('hidden.bs.modal', function(event) {
console.log(player);
event.target.stopVideo();
});

Update the question with more details
Its really hard to tell what is the problem because you only posted html. You having problem with locating close button and your console.log doesnt trigger. Obviously your javascripe file has some errors above your console.log line.
To detect if modal is closed you can use this EVENT
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
I would not change id of modals when generating them, instead I would put data-attr on this element to have one .on('hidden.bs.modal') and to have control over every modal
UPDATE:
from youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
It has been said that if you embed in your html iframe with the youtube video then in the moment u make something like this in js:
function onYouTubeIframeAPIReady(){
var iframe = document.getElementById("my-video");
video = new YT.Player(iframe);
}
you dont have to define attributes of Player that you create, it will take it from the iframe.
fiddle: http://jsfiddle.net/ux86c7t3/2/

Well, you can simply remove the src of the iframe and then put back again like; so the iframe stops running.
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}

how to open a modal and switch the iframe src inside the modal

I have a modal in my application which currently opens using bootsrap:
<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
<div class="full-page-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe src="http://www.example.com/id/1"></iframe>
In my HTML I have a button attached to a function:
<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>
At present bootstrap opens the modal and Angular handles the click.
What needs to happen is this:
User clicks on button
The iFrame URL src is updated according to the button clicked
The modal is made visible.
What I think I need to do is this:
Remove the opening of the modal from bootstrap and hand this to Angular2
On button click the function updates the iframe src
The function then opens the modal (or hands this back to Bootstrap?)
My questions:
What is the best method to update the iframe src? Maybe to include a variable: {{iframeSrc}} and to update this after click?
What is the best way to handle modal opening?
Thank you!

Well this turned out to be really simple.
I created two functions:
initPlay(id) {
this.iframeSrc = "http://example.com/game/" + id;
}
clearPlay() {
this.iframeSrc = "";
}
I left bootstrap to manage the modal open and close and simply used the Angular2 (click) method to initiate the src change.
I added a "loading" class to the iframe to show that action is taking place.
Thats it.

Creating a text popup for multiple elements on a page

I'm not very experience with JavaScript and jQuery and I'm really needing help to think something through. I'm trying to display information to the user in a similar way to the Metro UI interface in Windows 8.
In essence I've got a page fulled with tiles of different sizes (just like Metro/Modern UI) and a tiny bit of information on each tile such as the date of a post. I'd like to be able to click the tile and for a text popup to appear with the information relevant to the tile that was clicked on.
I figure this would be an easy task if the content was static, but since I'm building the tiles based on a Facebook RSS feed, I'm having quite a bit of difficulty even figuring out how I would store and display the main text of the tile. To get my point across I've done an extremely simple sample of a box, and what I'd like.
<html>
<body>
<div class="large-box">
<p>Date</p>
<p>Basic synopsis</p>
<div class="body-text">
<p>This is the body text that I want hidden to start with, but visible in the pop-up.</p>
</div>
</div>
</body>
</html>
Now, I don't have a problem with creating tiles and populating them with the date and any other information, but I have no clue how to make the text inside the body-text div not visible inside the tile, but only when clicked and seen in a pop-up.
Honestly I don't even know if I should be storing the text inside the tile like that at all, but it's the only way I can think of organizing my data. If you may remember, I'll have up to 25 of these tiles going down the screen and I need to be able to access each one. As well, the reason I'm thinking like this in the first place is because I previously used jQuery UI Accordion which had the text it displayed hidden, then shown when clicked.
At this point, even if you can't help me with any working code samples or snippets and help or push in the right direction would be really appreciated.

If you're receiving dynamic content from some known location then you're not going to be able to write this statically.
This will require some fancy footwork on your end with JavaScript, since there is some much not known with what you've got going on I can offer you some start up code.
I will highly recommend that you create these tiles dynamically.
//load the string content from where ever you're querying it from
var tile = getTileContent();
var lb = document.body.querySelector('large-box'),
bt = document.createElement('div'),
showContent = function () {
//toggel
if (bt.isOpen) {
this.innerHTML = '';
bt.isOpen = false;
}else {
this.innerHTML = '<p>' + this.content + '</p>';
bt.isOpen = true;
};
};
bt.className = 'body-text';
bt.onclick = showContent;
bt.content = tile;
bt.isOpen = false;
lb.appendChild(bt);

What you need is a javascript framework with modal popup component, for example the bootstrap modal dialogs:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Title of the post in a tile
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Post title</h4>
</div>
<div class="modal-body">
...Post content...
</div>
</div>
</div>
</div>

Auto-closing functionality on Twitter Bootstrap JS alerts

The Twitter Bootstrap library now has Javascript plugins available, and one of them is supposed to give your alerts an automatic close button.
The documentation is here
I can't figure out how to get it to work. See this code and fiddle:
<div class = "alert-message fade in" data-alert = "alert">
<p>This is an alert!</p>
</div>
http://jsfiddle.net/SBQcp/
I'm sure there's a syntax piece that I'm missing, but I don't get it.

Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')