2015-08-21 3 views
1

Вот мой HTML код:всплывающее окно, когда пользователь нажимает на кнопку

<p style="align-content: center"> 
    <A style="align-content: center" HREF="newpopup.html" onClick="return popup(this, 'stevie')">my popup</A><br> 
</p> 
<p align="center"> 
    <input type="button" onclick="popup(this, 'about') " value="CLICK HERE"> 
</p> 

И JavaScript:

function popup(mylink, windowname) 
{ 
    if (! window.focus) 
    return true; 
    var href; 
    if (typeof(mylink) == 'string') 
    href=mylink; 
    else 
    href=mylink.href; 
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
    return false; 
} 

Моя кнопка «нажмите здесь» всплывает окно, но оно пусто. Я хочу, чтобы моя кнопка работала так же, как выше URL-ссылки «мое всплывающее окно».

Так что я хочу открыть содержимое newpopup.html в моем всплывающем окне при нажатии кнопки.

Моя ссылка URL для всплывающего окна работает нормально, я хочу, чтобы кнопка работала аналогично.

ответ

3

mylink (кнопки он this) не является строкой, так что вы пытаетесь открыть mylink.href:

if (typeof(mylink) == 'string') 
    href = mylink; 
else 
    href = mylink.href; 

Но кнопки не имеютhref свойства, так что это, как если бы Вы писали:

window.open(undefined, 'about', 'width=400,height=200,scrollbars=yes'); 

, который открывает пустую страницу, как и ожидалось. Если вы хотите, чтобы открыть ту же страницу как ссылку, используйте:

onclick="popup('newpopup.html', 'about');" 
0

Всплывающие окна могут быть сложными, если вы хотите, чтобы они «плавали» над вашей html-страницей. Это можно получить, используя абсолютное размещение, чтобы поместить «фильтр» и необходимый кадр поверх текущей страницы. Обычно я иду что-то вроде этого:

HTML

<body> 
    ... 
    <div class='myPopup'> 
      <iframe src='http://www.myurl.com' id='popup-frame'> 
      </iframe> <!-- /#popup-frame --> 
    </div> <!-- /.myPopup --> 
    ... 
</body> 

CSS:

.myPopup { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: #A8A8A8; 
    opacity: 0.4; 
    display: none; 
    z-index: 100; 
} 

#popup-frame { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 
+0

я не хочу просто всплывающее окно, я хотите всплывающее окно с перекрестной кнопкой справа, полосу прокрутки справа и весь экран. поэтому я выбираю всплывающее окно, но не знаю, как это реализовать в кнопке – SidJj

+0

@SidJj. Я не здесь, чтобы закодировать для вас. Предоставленный код предоставит вам базовую структуру для создания всплывающего окна. – asdf

1

Попробуйте этот простой кусок кода:

<script> 
    function fullwindowpopup(){ 
     window.open("newpopup.html","bfs","fullscreen,scrollbars") 
    } 
</script> 

<center> 
    <form> 
     <input type="button" onClick="fullwindowpopup()" value="CLICK HERE"> 
    </form> 
</center> 
Смежные вопросы