Modal pop up from url using Bootstrap 4.1.3

My content is sitting in an html file that i need to display in a modal popup. The trigger to open the modal will be on a different page.

I don’t want to place a container inside my markup and then load url content into it and then using the jquery do .modal(''show) .

So, how can i do this fully dynamically?

Could you use an iframe?

Or you could use jQuery to load() the content into the modal body, and then call modal('show') in the success callback.

Hi @m3g4p0p,
I’ll have to do the following, but the issue at my end is i don’t have the #result in the markup. How can i do it without putting the content in the dom and then triggering the modal?

$( "#result" ).load( "test.html", function() {
  $("#modalid").modal('show');
});

I want to read the test.html into a var and then tell bootstrap to show it in the model.

How to display data in the modal

$.get("test.html", function(data) {
	???
});

I am trying to avoid this alternate approach, where i can append a div to body, put data in it and then do modal.

 $.get("test.html", function(data) {

 	//$('<div />', { id: 'holdy' }).appendTo('body');
 
 	var $holdyDiv = $('<div />').appendTo('body');
 	$holdyDiv.attr('id', 'holdy');
 
 	//append data 
 	$holdyDiv.innerHtml(data);
 
 	//do modal
 	$('#divInData').modal('show');	
 });

You can use any CSS selector here instead of #result, such as .modal-body. Not sure I understand your question about not appending the content to the DOM though… isn’t that exactly what you’re trying to achieve?

BTW I’d suggest not to load the entire page into the modal (including head etc.) but only the body like so:

$('#my-modal .modal-body').load('test.html body', function () {
  $('#my-modal').modal('show')
})

Can’t i do $(data).modal('show')? The whole model structure is coming from the html file. UI pieces are being built by another team. I am putting every thing together only. I have suggested this same route to the designers already what you have in this post.

I don’t think so (but I haven’t tried it). What would be the difference though? Suppose it would be possible, then under the hood data would have to be appended to the DOM anyway…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.