Ask your JavaScript questions! Pay money and get answers fast! (more info)

Do not open window if, Responsive design JavaScript

  • SOLVED

This modal works fine but if the screen gets down to below 800px wide I would like the link to not call the modal, but open a new window

$j(function(){

$j.fn.modalmanager.defaults.resize = true;

$j('[data-source]').each(function(){
var $jthis = $j(this),
$jsource = $j($jthis.data('source'));

var text = [];
$jsource.each(function(){
var $js = $j(this);
if ($js.attr('type') == 'text/javascript'){
text.push($js.html().replace(/(\n)*/, ''));
} else {
text.push($js.clone().wrap('<div>').parent().html());
}
});

$jthis.text(text.join('\n\n').replace(/\t/g, ' '));
});

prettyPrint();
});

$j('a.testmodal').on('click', function(e) {
e.preventDefault();
var url = $j(this).attr('href');
$j(".modal-body").html('<iframe width="100%" height="575" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});

Answers (1)

2013-03-13

Christianto answers:

Hi,

what javascript modal you use in this code? is it bootstrap modal box?


eddiejanzer comments:

just bootstrap modal


Christianto comments:

If you activated bootstrap modal by set attribute data-toggle="modal",
you need to remove it and open the modal manually using .modal('show") method inside click event.

so it won't open and it can choose between open modal box or new window based on screen width.

$j(function(){
$j.fn.modalmanager.defaults.resize = true;

$j('[data-source]').each(function(){
var $jthis = $j(this),
$jsource = $j($jthis.data('source'));

var text = [];
$jsource.each(function(){
var $js = $j(this);
if ($js.attr('type') == 'text/javascript'){
text.push($js.html().replace(/(\n)*/, ''));
} else {
text.push($js.clone().wrap('<div>').parent().html());
}
});

$jthis.text(text.join('\n\n').replace(/\t/g, ' '));
});

prettyPrint();
});

$j('a.testmodal').on('click', function(e) {
e.preventDefault();
var m_box = $j(".modal-body"),
url = $j(this).attr('href'),
w = $j(window).width();
if(w > 800){
m_box.html('<iframe width="100%" height="575" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
m_box.modal('show');
} else {
window.open(url);
}
});


eddiejanzer comments:

This worked great, thanks a lot. You Win


eddiejanzer comments:

This worked great, thanks a lot. You Win


eddiejanzer comments:

something wrong with the site here, how do I assign the money to you?


Christianto comments:

Its on voting right now, you already vote for me
Thank you.. :)


eddiejanzer comments:

I wanted to comment. I used your code and it worked but I notice now in normal desktop that when I close the modal, the page stays "dark" and I have to click the page again to remove the effect