2016-03-14 3 views
-1

Я хочу показать 4 всплывающих окна, в то же время, которые показывают 4 разных слайда слайдов после нажатия соответствующей кнопки изображения.Невозможно отобразить более одного всплывающего окна одновременно

Я использовал JavaScript, чтобы сделать всплывающее окно, но не может завершить оставшуюся часть кнопки изображения. Когда я нажимаю кнопку воспроизведения слайдов с произвольной вспышкой.

Пожалуйста, обратитесь ниже код: -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" /> 
<link rel="shortcut icon" href="images/favicon.ico"/> 
<script src="ddmenu/ddmenu.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> 
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
     $("[id*=a]").live("click", function() { 
      $("#dialog26").dialog({ 
       title: "DMD Officers", 
       height: 700, 
       width: 1000, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       } 
      }); 
      return false; 
     }); 
    </script> 

    <script type="text/javascript"> 
     $("[id*=b]").live("click", function() { 
      $("#dialog27").dialog({ 
       title: "Outsourced Photographs", 
       height: 700, 
       width: 1000, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       } 
      }); 
      return false; 
     }); 
    </script> 

    <script type="text/javascript"> 
     $("[id*=c]").live("click", function() { 
      $("#dialog28").dialog({ 
       title: "DMD Dog Squad", 
       height: 700, 
       width: 1000, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       } 
      }); 
      return false; 
     }); 
    </script> 

    <script type="text/javascript"> 
     $("[id*=d]").live("click", function() { 
      $("#dialog29").dialog({ 
       title: "Snake awareness campaign", 
       height: 700, 
       width: 1000, 
       buttons: { 
        Close: function() { 
         $(this).dialog('close'); 
        } 
       } 
      }); 
      return false; 
     }); 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <table> 
<tr> 
      <td colspan="3" class="auto-style9"> 
       <nav id="ddmenu"> 
    <ul> 
    <li><a href="Home.aspx" target="_blank">Home</a></li> 
    <li><a href="http://www.ril.com/OurBusinesses/Global-Corporate-Security/Security-Services.aspx" target="_blank">About Us</a></li> 
</ul> 

</nav> 
</td> 
</tr> 

<tr> 
        <td style="border-style: solid; border-color: #996600;"> 
         <asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" /> 
         <div id="dialog26" style="display: none;"> 
          <embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" /> 
         </div> 
        </td> 
        <td style="border-style: solid; border-color: #996600;"> 
         <asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" /> 
         <div id="dialog27" style="display: none;"> 
          <embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" /> 
         </div> 
        </td> 
        <td style="border-style: solid; border-color: #996600; text-align: center;"> 
         <asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" /> 
         <div id="dialog28" style="display: none;"> 
          <embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" /> 
         </div> 
        </td> 
        <td style="border-style: solid; border-color: #996600; text-align: center;"> 
         <asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" /> 
         <div id="dialog29" style="display: none;"> 
          <embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" /> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </form> 
</body> 
</html> 
+0

может сделать ваш вопрос более ясным, в отношении того, какая часть вашей программы терпит неудачу и с какой частью вам нужна помощь. Вы также можете разместить Jsfiddle, чтобы продемонстрировать проблему. – JustLearning

+0

Не используйте 'LIVE' для привязки событий. Вместо этого используйте 'on'. –

ответ

0

Этот код здесь $("[id*=btnPopup]") это значит, что является захват всех кнопок, которые содержат в btnPopup, так как остальные кнопки содержит, что из-за названия (btnPopup2, btnPopup3, btnPopup4) у вас есть захват всех с одним и тем же (первым) кодом, и что вы только нажимаете только на первый уволен.

Итак, переименуйте первую кнопку на btnPopup0, если вы хотите использовать этот код так, как есть, и заставить его работать.

Ссылка: https://api.jquery.com/attribute-contains-selector/

Но я вижу больше ошибок ...

в этой строке $("#dialog").dialog({, которые существуют при каждом вызове, по-прежнему называют ту же часть страницы, чтобы сделать диалог, но я см., что другие части имеют имена, такие как dialog1, dialog2 и т. д. ... так что это то, что вы также должны исправить.

0

много и много ошибок в вашем коде !!! . Позвольте мне указать один за другим.

1.$("[id*=a]").live("click": Аналогичный код существует и в других трех разделах. Не использовать Live для привязки событий. Он устарел и устарел по уважительным причинам. Взятый из дока

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

Также в вашем сценарии [id*=a] не требуется. Просто id=a было бы достаточно.

live() jquery API Document

2.$("#dialog").dialog({: У вас есть один и тот же код в других 3-х секций, а также. Вы привязываете события к одному и тому же идентификатору. Что такое BIG NO. Не используйте одинаковые идентификаторы Идентификатор должен быть уникальным для всего DOM. Вы можете использовать класс. Просто поместите одно и то же имя класса во все div и затем привяжите события, используя имя класса. - Когда вы связываете события с помощью ids, JQuery найдет первый элемент с этим идентификатором в DOM (чтение сверху) и привязывает событие к onle этому элементу.



Вы повторяете ту же самую логику сценария несколько раз, make it Generic. Таким образом, очистка вашего HTML и SCripts, Ниже приведено то, что вам действительно нужно.

HTML

<tr> 
     <td style="border-style: solid; border-color: #996600;"> 
     <asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" /> 
     <div class="dialog" data-dialog-title="DMD Officers" style="display: none;"> 
      <embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" /> 
     </div> 
     </td> 
     <td style="border-style: solid; border-color: #996600;"> 
     <asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" /> 
     <div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;"> 
      <embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" /> 
     </div> 
     </td> 
     <td style="border-style: solid; border-color: #996600; text-align: center;"> 
     <asp:imagebutton id="c" class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" /> 
     <div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;"> 
      <embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" /> 
     </div> 
     </td> 
     <td style="border-style: solid; border-color: #996600; text-align: center;"> 
     <asp:imagebutton id="d" class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" /> 
     <div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;"> 
      <embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" /> 
     </div> 
     </td> 
    </tr> 

Примечание:I added a class to all the imageButton, And then changed the div id to class. Также добавлен атрибут data-dialog-title, чтобы сохранить заголовки для диалога. More About data Attribute Вы увидите его использование ниже.

Script

<script type="text/javascript"> 
$(function(){ 
    $.each('.dialog',function(){ //loop all the div's and apply plugin for all of them 
    $(this).dialog({ 
     title: $(this).data('dialog-title'), //extract the title here. 
     height: 700, 
     width: 1000, 
     buttons: { 
     Close: function() { 
      $(this).dialog('close'); 
     } 
     } 
    }); 
}); 


    $(".imageDialog").on("click", function() { 
    $(this).closest('td').find(".dialog").dialog("open"); //this is how you open the dialog, taken from the plugin site. 
    }); 
}); 
</script> 
  • В документе готов применить диалог плагин ко всему Див-й с классом dialog
  • Bind события для всех IMAGEBUTTON только с помощью селектора класса .imageDialog
  • следа до родителей td, затем проследите, чтобы найти div с именем класса «диалог» и откройте его.
+0

Я следил за вашим кодом, но когда я нажимаю на кнопку, появляется всплывающее окно с изображением, когда я меняю 'on' на' live' его работу, но когда я нажимаю на ту же кнопку изображения, второе всплывающее окно не наступает. –

+0

@JayDesai Если вы говорите, что работа работает, а не включена, это означает, что вы загружаете скрипты до загрузки HTML. Вы не загружаете сценарий на готовый документ. Я обновил свой ответ, чтобы запустить сценарий на готовом документе. Используйте его и дайте мне знать, исправляет ли он проблему. Также скажите мне, где вы разместили блок сценария? после HTML или до него? Также дайте мне знать, если ваш HTML построен динамически с помощью jquery или нет. –

+0

Теперь появляется всплывающее окно, но когда я нажимаю кнопку того же самого изображения, второе окно всплывающего окна не подходит. Я поставил скрипт в голову, а также проверил, вставив отдельный файл сценария, но проблема остается такой же. –

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