Новое окно

Html html target new window popup

I hope someone reading this could understand and find it useful. where to use .target command in html open link in new tab html open new tab html Question: I have a form(this form is a pop up) in which i have a JQGrid and a set of fields that i want to submit to the controller.

How to target DOM elements from new popup window, using chrome extension popup.html

I have a chrome extension that works fine, I reference a function and it opens a pop up. Generally, how can I access the newly popped up html dom elements (Within the same domain) from my popup.js or popup.html document.

function cfs_policy() < chrome.tabs.query(, function(tabs) < // query the active tab, which will be only one tab //and inject the script in it chrome.tabs.executeScript(tabs[0].id, ); >); > function d_cfs_policy() < chrome.tabs.query(, function(tabs) < // query the active tab, which will be only one tab //and inject the script in it chrome.tabs.executeScript(tabs[0].id, ); >); > document.getElementById('cfs').addEventListener('click', cfs); document.getElementById('d_cfs').addEventListener('click', d_cfs); document.getElementById('cfs_policy').addEventListener('click', cfs_policy); document.getElementById('d_cfs_policy').addEventListener('click', d_cfs_policy); 

function cfs_policy() < var x = document.getElementById('tabFrame'); var y = x.contentDocument ; var els = y.getElementsByTagName('table')[8] els.getElementsByClassName('actionIcon editIconBtn')[0].click() els.focus(); >cfs_policy() 

function d_cfs_policy() < console.log('test') >d_cfs_policy() 

I actually did what I was trying to do all along. Target the window by name. You can see on line 8, when the button is clicked, it opens a window. Then on line 14, I referenced the same window and I’m free to get the objs from line 15 down. Thanks for the help. I hope someone reading this could understand and find it useful.

function cfs_policy() < var test; var x = document.getElementById('tabFrame'); var y = x.contentDocument ; var els = y.getElementById('profileTable') els = els.getElementsByClassName('listItem') for(i=0;ielse if (sel[p-1].value == 1) else if (sel[p-1].value == 2) else if (sel[p-1].value == 3) else if (sel[p-1].value == 4) test += lab[p].innerText + " : " + cat + "\n" console.log(test) > catch(error) < >> >, 3000); > > cfs_policy() 

Opening popup windows in HTML, Stack Overflow Public questions & answers; Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Talent Build your employer brand ; Advertising Reach developers & technologists worldwide; About the company

Html target blank new popup window

By this you can open your document in new tab by this linked document in the same frame as it was clicked (this is default) by this linked document in the parent frame Opens the linked document in the full body of the window

Html — How to open popup/new tab (target=»_blank») and, Browse other questions tagged html mobile popup desktop target or ask your own question. The Overflow Blog A history of open-source licensing …

Html.BeginForm pops up a new window

I have a form(this form is a pop up) in which i have a JQGrid and a set of fields that i want to submit to the controller. The following is part of the form

The following is controller

public ActionResult Index(string RoleId, string state, string priority, string system, string client) < _roleEntity = new RoleEntity(); ListsystemList; RequestModels _request = new RequestModels(); _roleEntity.ValidFrom = DateTime.Now; _roleEntity.ValidTo = DateTime.Now; systemList = _request.GetAllSystems(); ViewData[StringConstants.System] = systemList; if (RoleId == null && state == "Add") < ViewData[StringConstants.ErrorMessage] = "Please select a role"; >else < ViewData[StringConstants.ErrorMessage] = string.Empty; >return View(_roleEntity); > 

My Problem is, 1. when i click on CreateRequest button, a new window gets opened. The form does not post in the same window. 2. I am calling the Index method from the form as my attempts to call another custom method like CreateRequest failed with error like The view ‘CreateReqeust’ or its master could not be found. The following locations were searched: ~/Views/Role/CreateReqeust.aspx .

Thanks and Regards, Muzammil Ahmed

There is nothing much in the AddRole method. I am just setting a value into a hidden field.

Add this to the section of the popup page:

This is a common ASP.NET issue, not specific to MVC.

Popup — HTML Open Link in New Fixed Size Window, I am trying to add a pop up confirmation window for a contact us form I am making. I want a new html page to to open up in a new window that …

Источник

How to Open Links in a Popup Window

Popup windows are not always desirable and are most likely frowned upon by many due to it being infamous for being used to open advertisements. However there may be a genuine need for opening links in a popup window in web applications. In this post, I will show how we can easily define click behavior on links to open them in a popup along with some customization options such as sizing the popup window.

Open Link in a Popup Window

Normally links get opened in the same window in which they are clicked in. In order to open them in a new window, we add target=»_blank» attribute to links. However to open the links in a separate popup window, we can make use of the onclick property and specifying a inline JavaScript code window.open as shown below.

HTML + JavaScript code for Popup

Having the popup window re-sizable and scrollable by the user is the most ideal case when you are creating popups. Not being able to resize or scroll a popup window might frustrate some users. However if you have a specific use case where you want to disable scrolling as well as resizing on the popup window then read on to do these customizations.

Customizing Popup Window

In the most basic form as we saw above, the popup window will allow users to resize, scroll and change the address of it. In certain cases, you may want to disallow such actions on the popup window. In order to achieve that, we need to pass on additional parameters to the window.open method. These additional parameters that can be used are as follows:

location , menubar , resizable , scrollbars , status , titlebar and toolbar (source)

Note that not all of these parameters are supported by all the browsers and therefore you may not have a uniform behavior if you specify them. For e.g. lets see a use-case below

Disable resizing and scrolling in popup window

To disable resizing and scrolling in the popup window, specify resizable=no and scrollbars=no .

 href="http://kanishkkunal.com" target="popup" onclick="window.open('http://kanishkkunal.com','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"> Open Link in Popup 

You will find that disabling the resizing of popup window is only supported in Internet Explorer and will not work in Chrome or Firefox. Additionally, hiding the scrollbar will work in Internet Explorer (IE), Firefox and Opera but not in Chrome.

Open Link in New Window vs Popup Window

Before you go all crazy with popup windows, do take a moment to decide whether you really want to adopt the popup behavior vs opening links in a new window. A link can be opened in a new window (or in a new tab) by simple adding the target=»_blank» attribute to links like shown below. These kinds of links are never blocked by the popup blocker while opening.

 href="http://kanishkkunal.com/" target="_blank">Open in a New Window 

To conclude, I would restate that unless you have a very specific reason, opening links in popup window should be avoided as much as possible. But when you really have the need to do it, open just one link at a time and disable the default link behavior in order to avoid popup blockers and to give better experience to the user.

Источник

Атрибут target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Этот атрибут может принимать следующие значения:

_blank — загружает страницу в новое окно браузера;

_self — загружает страницу в текущее окно;

_parent — загружает страницу во фрейм-родитель;

_top — отменяет все фреймы и загружает страницу в полном окне браузера.

В примере 1 показано создание ссылки на сайт, который открывается в новом окне.

Пример 1. Открытие документа в новом окне

      
Ссылка открывает новое окно на сайт htmlbook.ru
  

Для создания валидного кода атрибут target может использоваться только при переходном , как показано во всех примерах этой статьи.

Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма (пример 2).

Пример 2. Открытие документа во фрейме

      
Сайт htmlbook.ru
  

Ссылка в примере 2 ведет на сайт htmlbook.ru, открывающийся во фрейме с именем newframe .

Когда у target указано неизвестное значение, например, имя фрейма набрано с ошибкой, то это приводит к тому, что ссылка открывается в новом окне.

Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, нет необходимости добавлять во все теги target=»_blank» . Код можно сократить, если вначале страницы добавить строку , как показано в примере 3.

Пример 3. Использование тега

     
Ссылка откроется в новом окне
 
Ссылка откроется в текущем окне
  

Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу атрибут target=»_self» , как показано в данном примере.

Источник

Как создать простое модальное окно на CSS

Модальные (всплывающие) окна – это очень популярный элемент интерфейса современных сайтов. Оно может использоваться для вывода различного контента веб-страниц такого, например, как формы (обратной связи, регистрации, авторизации), блоки рекламной информации, изображения, уведомления и др.

В большинстве случаев модальное окно создают на JavaScript. Но его можно создать не только с помощью JavaScript, но и посредством только HTML5 и CSS3.

Демо модального окна

Демонстрацию всплывающего окна, работающего только на HTML5 и CSS3, вы можете посмотреть здесь:

HTML и CSS код модального окна

HTML разметка модального окна:

 
 
 
 
Название
 × 
 
Содержимое модального окна.
 
 
 
 

Ссылка, с помощью которой осуществляется открытие модального окна:

/* стилизация содержимого страницы */ body { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #292b2c; background-color: #fff; } /* свойства модального окна по умолчанию */ .modal { position: fixed; /* фиксированное положение */ top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); /* цвет фона */ z-index: 1050; opacity: 0; /* по умолчанию модальное окно прозрачно */ -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; /* анимация перехода */ pointer-events: none; /* элемент невидим для событий мыши */ margin: 0; padding: 0; } /* при отображении модального окно */ .modal:target { opacity: 1; /* делаем окно видимым */ pointer-events: auto; /* элемент видим для событий мыши */ overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */ } /* ширина модального окна и его отступы от экрана */ .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 30px auto; /* для отображения модального окна по центру */ } } /* свойства для блока, содержащего контент модального окна */ .modal-content { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; } @media (min-width: 768px) { .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); box-shadow: 0 5px 15px rgba(0,0,0,.5); } } /* свойства для заголовка модального окна */ .modal-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eceeef; } .modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; font-weight: 500; } /* свойства для кнопки "Закрыть" */ .close { float: right; font-family: sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; text-decoration: none; } /* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */ .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; opacity: .75; } /* свойства для блока, содержащего основное содержимое окна */ .modal-body { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px; overflow: auto; }

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу body нужно добавить CSS-свойство overflow со значением hidden . А после скрытия модального окна данное свойство убрать у элемента body . Данное действие можно осуществить только с помощью JavaScript:

document.addEventListener("DOMContentLoaded", function(){ var scrollbar = document.body.clientWidth - window.innerWidth + 'px'; console.log(scrollbar); document.querySelector('[href="#openModal"]').addEventListener('click',function(){ document.body.style.overflow = 'hidden'; document.querySelector('#openModal').style.marginLeft = scrollbar; }); document.querySelector('[href="#close"]').addEventListener('click',function(){ document.body.style.overflow = 'visible'; document.querySelector('#openModal').style.marginLeft = '0px'; }); });

Источник