Блог

Я использую Bootstrap, jQuery UI для создания диалогового окна и поместил свой html через проверку html. У меня есть этот код внутри контейнера div (внутри тега body):

 <div id="dialog" class="dialog-box" title="Deleting, are we?" style="display:none">
  <p>Are you sure you want to delete this content?</p>
  <div class="decision">
    <button class="send-delete">
      delete
    </button>
    <button class="cancel">
      cancel
    </button>
  </div>
</div>
  

и я использую этот код jQuery для активации диалогового окна:

 $("a.content-delete").click(function(e) {
  var dialogBox = document.querySelector("#dialog");
  dialogBox.setAttribute("data-content-id", id);
  $( "#dialog" ).dialog({
    modal: true,
    resizable: false,
    dialogClass: 'no-close success-dialog',
    height: 80,
    width: 310,
    position:
          {
             my: "center",
             at: "center",
             of: window
           }
  });
});

$("button.cancel").click(function(e) {
  $( "#dialog" ).dialog('close');
});
  

Я также применяю некоторый CSS к диалоговому окну:

 .ui-widget.success-dialog {
    font-family:  Verdana, Geneva, sans-serif;
    font-size: .8em;
    text-align: center;
}
.ui-widget-content.success-dialog {
    background: #c4c6de;
    border: 1px solid #1f0e3e;
    color: #1f0e3e;
}

/*.ui-dialog.success-dialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}*/
.ui-dialog.success-dialog {
    outline: 0 none;
    padding: 0 !important;
}

.ui-dialog.success-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 0 !important;
    margin: 0;
}

.ui-dialog.success-dialog .ui-widget-header {
    background: #1f0e3e;
    border: 0;
    color: #ffffff;
    font-weight: normal;
}

.ui-dialog.success-dialog .ui-dialog-titlebar {
    padding: 0.1em .5em;
    position: relative;
    font-size: 1em;
}
.decision{
  width: 130px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}
  

Странно то, что на одной из моих страниц это работает. А в другом — нет. Я не могу найти ничего, что могло бы вызвать проблему, связанную с различием на двух страницах

Когда я использую этот код в JsFiddle, я не могу воссоздать проблему.

Я попытался скопировать исходный код всего html со страницы и использовать его в скрипке, а затем запустить свой код jQuery и CSS, и он отлично работает в скрипке.