Hide bootstrap modal popup - phantomjs

Question

var webpage = require('webpage').create();
var filename = 'demo.png';
webpage.open('https://www.example.com/', function() {
webpage.render(filename);
phantom.exit();});
In the above code when the example web site loads it displays a bootstrap popup. now in phantom js i want to take a screenshot of the web page without the popup. please help me on how to hide this popup through phantomjs..

Answer 1

You need to hide/turn modal off before making a screenshot:
var page = require('webpage').create();
var filename = 'demo.png';
page.open('https://www.example.com/', function() {
// Delay script by a second to give
// javascript some time to load and execute modal
setTimeout(function(){
page.evaluate(function(){
// You'll need to find the modal id to hide it programmatically
$('#themodal').modal('hide');
});
page.render(filename);
phantom.exit();
},
1000);
});
Another way is to just remove the modal window elements from DOM:
page.evaluate(function(){
// These classes are for Bootstrap 4
$('.modal, modal-backdrop').remove();
});