2015-11-13 4 views
3
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Dialog - Default functionality</title> 

    <link rel="stylesheet" href="jquery-ui.css"> 
    <script src="jquery-1.10.2.js"></script> 
    <script src="jquery-ui.js"></script> 
    <script> 
    $(function() {   
    $("#dialog").dialog({ 
     width : 700, 
     height : 370, 
     modal: true 
    }); 

    }); 
    </script> 
</head> 
<body> 
<div id="dialog" title=""> 
    <iframe frameborder="0" scrolling="no" width="670" height="310" href="www.google.com"></iframe> 
</div> 

</body> 
</html> 

Я хочу отображать всплывающие окна при загрузке страницы. Я получаю всплывающее окно, как хочу. Но проблема в том, что я получаю всплывающее окно, когда использую следующую ссылку.JQuery modal - External css не работает

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 

Но, я не хочу использовать эту ссылку. Поэтому я загружаю файлы и импортирует их в свой проект. Когда я использую загруженный файл CSS, я не получаю кнопку «X» в модальном всплывающем окне. Пожалуйста, помогите мне с этим. Спасибо.

This is the one I am using the link. Список

This is the one I am using external file

+0

Является ли CSS той же папкой, что и страница? не входит внутри, как папка css? – Cheshire

+0

Да. Оба находятся в папке WebContent. –

+0

Пожалуйста, помогите мне Чешир. Что нужно изменить. –

ответ

0

http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css загрузки из .png файлов, которые приведены ниже, но если вы используете скачанный .css в проекте эти .png файлы не получают загружены, и это причина, «X» не доступен в диалоге , Вы можете проверить через скрипач или любой другой инструмент захвата сетевого трафика. Загрузите все необходимые изображения и сохраните их в своем проекте с одинаковой иерархией папок (темы/база/изображения).

http://code.jquery.com/ui/1.10.1/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png 
http://code.jquery.com/ui/1.10.1/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png 
http://code.jquery.com/ui/1.10.1/themes/base/images/ui-icons_222222_256x240.png 
http://code.jquery.com/ui/1.10.1/themes/base/images/ui-bg_flat_75_ffffff_40x100.png 

Как я уже говорил в моих комментариях - вы можете скачать всю тему Jquery от here.

+0

Как получить только этот образ? –

+0

Получите его от https://github.com - 'ui-bg_flat_0_aaaaaa_40x100.png' находится здесь https://github.com/jquery/jquery-ui/tree/master/themes/base/images Существует несколько других опций : Один из таких параметров (с использованием IE) - Получите его из «Временных файлов Интернета» после загрузки. –

+0

Также получите его с code.jquery.com - введите 'downlaod ui-icons_222222_256x240.png из code.jquery.com' в Google, он перенаправит код.jquery.com. –

0

JQuery UI имеет свои собственные изображения, css и javascript файлы.

Скачать версию с его содержанием здесь: http://jqueryui.com/download/

Если вы не заботитесь много о CSS, вы можете выбрать от «базовый» вариант ниже страницы. Как только вы его загрузите, он даст вам zip с javascript, css и изображениями. Попытайтесь сохранить папки как они есть (например, извлеките файлы в папку с именем «jquery-ui»), чтобы изображения и ссылки работали правильно.

Теперь вы можете изменить стиль в своем CSS, чтобы достичь желаемого стиля.

Смежные вопросы